1. Cross-label ⻚ Communications
Different communication, the essence of the principle of inter-label ⻚ is to transport uses one of these may be intermediate medium shared , so the more frequently-used ⽐ Remedies are the following:
By ⽗ ⻚ ⾯ window.open () and Submenu ⻚ ⾯ postMessage
Asynchronous, by window.open ( 'about: blank') and tab.location.href = '*'
Set up under the same domain shared localStorage and listening window.onstorage
Repeat is writing the same value ⽆ trigger law
It will be limited incognito mode, etc.
Setting up shared cookie and constantly polling dirty check (setInterval)
Server or by an intermediate layer implementation
2. The browser architecture
Using the User Interface ⾯
The main process kernel
Rendering engine
JS lead engine
Perform stack
Event trigger thread
message queue
Micro-task
Macro task
Open networks asynchronous thread
Timer thread
3. The next event loop browser (Event Loop)
Event loop means: macro task to perform it, then empty the micro Perform the task list, the task cycling to perform it macro, micro and then clear the task list
Micro task microtask (jobs): promise / ajax / Object.observe ( the Remedies obsolete)
Macro any task macrotask (task): setTimout / script / IO / UI Rendering
4. From the input START url to show the process of
DNS solution analysis
TCP three-way handshake your watch
Transmission request, partial analysis url, set the file requests (header, body)
The server returns the requested files (html)
Browser rendering
HTML parser --> DOM Tree
Labeling algorithm, make the elements of the state of the flag
dom tree construction
CSS parser --> Style Tree
Solutions resolution css code, style tree into ⽣
attachment --> Render Tree
Binding dom tree and style tree, to render tree ⽣
layout: cloth Bureau
GPU painting: pixel rendering ⻚ ⾯
The redraw and refluxed
When the hair style elements ⽣ changes, the browser needs to trigger an update to redraw elements. This process, there are two types of operations, i.e., the return redraw
Redraw (repaint): when changing the element does not affect the layout style, the browser will redraw the elements into ⾏ Use update this case, because the pixel only need to re-draw the screen for the UI layer, and therefore less loss
Reflow (reflow): When the Size element, structure, or trigger certain attributes, the browser will re-render ⻚ ⾯, called reflux. In this case, the browser needs to go through re-calculation, the calculations also need to re-⻚ ⾯ cloth Bureau, and therefore heavier operations. It will trigger reflow operations:
⻚ ⾯ initial rendering
Browser window-connector zoomed ⼩ change
Elements Size, location, content development ⽣ change element changes the font zoomed ⼩
Tim add or delete can ⻅ the dom element
Stimulated live CSS pseudo-class (e.g. : : hover )
Using query certain attributes or recall certain Remedies
clientWidth、clientHeight、clientTop、clientLeft offsetWidth、
offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
getComputedStyle()
getBoundingClientRect()
scrollTo()
Certainly trigger reflux redraw, redraw ⼀ not given trigger reflux. Redraw overhead with a smaller size, higher cost of returning
Best Practices:
css
Avoid avoid Using table layout
The animation effect to apply it to the position property to absolute or on fixed elements
javascript
Avoid frequent operation pattern, the system can be summarized ⼀ ⼀ revision
Try Using the class into ⾏ style modification
Reduce the number of additions and deletions dom, you can use with string or documentFragment ⼀-time Inserting
Optimization of the limit, modify the sample type can be display: none after modification
Remedies to avoid multiple triggers that can trigger reflux on ⾯ mentioned, if you can, try Using variables exist live
6. storage
We often need to businesses in ⼀ some data storing anything, through often can be divided into shorter temporary storage and holding long-volatile storage.
Transient, we only need to data stored in memory, only when running a time can Using persistent storage, can be divided into the browser -side and server-side
Browser:
cookie: Using the usual Use to store user identity, login status
http automatically carried in , the volume limit of 4K , may set an expiration time of a self-made
localStorage / sessionStorage: ⻓ long storage / delete window-connector close , volume is limited to 4 ~ 5M
indexDB
server:
Distributed Cache redis
database
7.Web Worker
Modern browsers for the JavaScript to create a multi-threaded environment . New tasks can be assigned and, in part to a worker thread when running a ⾏ and the two threads may be independent attention immediately when running a mutual interference is not, dry, machines automatically with a message through the system each communicate.
Using the Basic Law:
// Create a worker const worker = new new Worker ( 'work.js' ); // push message to the primary process worker.postMessage ( 'the Hello World' ); // listen for the main process to the news worker.onmessage = function (Event) { the console.log ( 'Received Message' + the event.data); }
limit:
Homologous restriction
⽆法使⽤ document / window / alert / confirm
Load local resource ⽆ law
8. memory leaks
Unexpected global variables: ⽆ method is recovered
Timer: not closed properly, resulting cited Using external variables ⽆ law is released event
Monitor: no right to destroy (low version of browsers might appear)
Closure: cause ⽗ stage process variables is released ⽆
Use Cited dom: dom when the element is deleted, cited Using memory is not properly cleared
Use may be chrome in the timeline into ⾏ tag memory, visual memory, view the changes to identify outliers.