Summary of browser DOM rendering parsing process
I. Main components of the browser (as shown below)
Note: Interface indicates the human-machine interaction Interface.
- User Interface: refers to the UI layout of browser function modules. For example: address bar, forward/background buttons, favorites, etc. Different browsers have different UI layouts for their functional modules.
- The Browser engine: passes instructions between the UI and the rendering engine; At the same time operate Data store (Data Persistence) to handle Data Persistence;
- Rendering engine is responsible for Rendering and Rendering the requested layout files and style files;
- Networking: making HTTP requests;
- The JavaScript Interpreter is responsible for parsing and executing the JavaScript language.
- UI Backend: Used to draw basic widgets, such as combo boxes and Windows. It exposes a common interface that is platform-independent, while underneath it uses the operating system’s user interface approach.
- Data Persistence: Responsible for persistent storage of Data in the browser. For example, cookies, session, localStorage, and indexDB.
Focus on Rendering engine, NetWorking, JavaScript Interpreter, and Data Persistence. Focus on Rendering engine and Rendering engine.
Ii. Process of DOM parsing page generated by browser (as shown below)
The first step
Step 2: Associate the DOM Tree and CSS rules to generate the Render Tree.
Step 3: Enter the layout phase, assigning each node of the DOM tree the exact coordinates that appear on the screen (this stage is also the render tree)
Step 4: Enter the rendering phase, where the rendering engine finishes its work and the UI Backend draws each node of the rendering tree to render the page.
Note: To speed up page rendering, the rendering engine uses progressive rendering, which works in a parse-and-render mode instead of waiting for the entire HTML to be parsed.
Question summary?
Q: why do some web pages take several seconds to appear? A: This problem has nothing to do with the rendering engine, but is mostly due to network delays when requesting CSS style files.Copy the code
Iii. Differences in DOM parsing of different kernel browsers (as shown in the figure below)
- Webkit-kernel browsers: Chrome and Safari
- Gecko kernel browser: Firefox
From the above figure, we can see that the rendering process and mechanism of Webkit and Gecko kernel are generally the same, and their differences are summarized:
- In terms inconsistent, Webkit kernel DOM Tree, Render Tree, Layout, Gecko kernel Content Model, Frame Tree, Reflow.
- Gecko has one more layer than Webkit after parsing the HTML, called the Content Sink.
Fourth, JS operation DOM performance optimization scheme
It is well known that manipulating the DOM directly with JS is a waste of performance. This is because every time a DOM is accessed/added/deleted/updated via JS, the DOM Tree is rearranged/redrawn.
Rearrangement: When the DOM node information changes, such as position change, DOM node size change, the DOM will be recalculated, and layout/backflow operation (different browser terms vary);
How can **** lead to a rearrangement? **** 1. Zoom the browser window. 2. Change the size or position of DOM nodes on the page. 3. Modify the font information on the DOM node using innerHTML/innerText. Note that text is also one of the DOM nodes (text nodes); 4. Change the style of THE DOM node through the STYLE attribute in the DOM of JS; 5. Operate DOM nodes (access/add/delete/update) through JS; 6. First rendering of THE HTML page;Copy the code
Redraw: when the DOM node information does not change, only the appearance style of the DOM node is changed (the position and size of the DOM node are not changed, only the font color or background color is changed). The DOM is redrawn. Note that there will always be redrawing, redrawing does not necessarily have to rearrange;
- DOM object references are cached by variables to reduce direct manipulation of the DOM.
// Basic mode
for(var i=0; i<100; i++){var dom=document.getElementById("xxx");
dom.innerHTML=dom.innerHTML+i;
}
// The variable caches the DOM reference
var dom=document.getElementById("xxx");
for(var i=0; i<100; i++){ dom.innerHTML=dom.innerHTML+i; }Copy the code
- Create a DOM fragment container using the createDocumentFragment() method.
// Basic mode
var dom=document.getElementById("xxx");
for(var i=0; i<100; i++){var cre_dom=document.createElement("xxx");
dom.appendChild(cre_dom);
}
/ / use createDocumentFragment
var dom=document.getElementById("xxx");
var cre_frag=document.createDocumentFragment();
for(var i=0; i<100; i++){var cre_dom=document.createElement("xxx");
cre_frag.appendChild(cre_dom);
}
dom.appendChild(cre_frag);
Copy the code
- Use querySelectAll() to access DOM nodes with better performance;
- CSS3 animation mechanism is used, hardware acceleration is enabled, and rendering calculation is handed over to GPU;
Refer to the article: www.html5rocks.com/en/tutorial…