DOM browser rendering resolution process summary

DOM browser rendering resolution process summary

First, the main components of the browser (as shown below)

Note: Interface represents the man-machine interface.

1. The user interface (the User Interface) : refers to the UI layout browser function module. For example: the address bar, forward / back buttons, favorites, etc. Different browsers UI layout their function module is not the same.
2. Browser engine (Engine Browser) : transfer instructions between the interface and the UI rendering engine; simultaneous operation data storage (Data Persistence) processing of persistence data;
3. Rendering engine (Rendering Engine) : is mainly responsible for the requested file layout, style file is parsed rendering showing a Web page;
4. Network (Networking) : HTTP request for invocation;
5. JS interpreter (JavaScript Interpreter) : primarily responsible for parsing and executing the JavaScript language;
6. The user interface rear end (the UI the Backend) : to draw basic widgets, such as combo boxes and windows. Which discloses a universal interface platform-independent, using the underlying operating system's user interface method.
7. Data storage (the Data Persistence) : responsible for the persistent data stored in the browser. For example: cookie, session, localStorage, indexDB storage and other functions.

Important to understand : Rendering engine (rendering engine), NetWorking (network), JavaScript Interpreter (JS engine), Data Persistence (data storage)

Second, the browser generates (as shown below) during page parsing the DOM

The first step : the loaded HTML document parsed into a DOM tree (DOM Tree), and the respective numerals parsed into a DOM tree of each node; while parsing the HTML style will resolve to CSS rules CSS (CSS Rules).

Step two : the parsed into a DOM tree and CSS rules associated generated render tree (Render Tree).

The third step : enter the layout stage, the exact coordinates of the assignment appears on the screen for each node in the DOM tree (this stage or render tree)

Step Four : enter the drawing stage, where the rendering engine of the work is over, then give the back-end user interface (UI Backend) for each node in the render tree to draw, showing the results page.

Description: In order to increase the page rendering speed, rendering engine uses a progressive rendering, which is at the edge resolution, working under the side rendering mode, it does not have to wait for the whole HTML parsing complete re-rendering.

Summary doubt?

问： 为什么有些网页打开时过了几秒才有样式出现？
答：这个问题跟渲染引擎无关，主要由于请求CSS样式文件时网络延时造成。

Third, the difference of the different cores DOM parsing browser (as shown below)

• Webkit-browser: chrome, Safari
• Gecko-browsers: Firefox

Can be seen from the chart, the whole is consistent rendering processes and mechanisms Webkit and Gecko core, their differences are summarized:

1. The term inconsistent, Webkit kernel DOM Tree (DOM tree), Render Tree (tree rendering), Layout (layout), Gecko kernel Content Model (content model), Frame Tree (tree frame), Reflow (reflux).
2. After parsing the HTML Webkit Gecko than an extra layer, called Content Sink (content groove).

Four, JS performance optimization operation DOM

As we all know, the direct use of JS DOM operations is a waste of performance. Because each operation by JS (access / add / delete / update) DOM will result in DOM Tree (DOM tree) re-layout / return, drawing (referred to as rearrangement, redraw process).

Rearrangement: when the DOM node information changes, for example to change the position, size change DOM node, the DOM is recalculated, and the layout / reflow operation (different browsers is not the same terminology);

****怎样会导致重排？****
1. 缩放浏览器窗口；
2. 改变页面中DOM节点大小或位置；
3. 通过innerHTML/innerText修改DOM节点上的字体信息。注意：文本也属于DOM节点之一（文本节点）；
4. 通过JS的dom中style属性来改变DOM节点的样式；
5. 通过JS对DOM节点进行操作（访问/新增/删除/更新）；
6. HTML页面首次呈现；

Redraw: When DOM node information does not change, the only change the appearance pattern DOM node (without changing the position and size of the DOM node, only changing the font color or background color, etc.). Will re-draw the DOM. Note that there are bound to be rearranged redraw, redraw there is not necessarily a rearrangement;

1. DOM object reference variable by the cache, thereby reducing the direct manipulation of the DOM;

//基本方式
for(var i=0;i<100;i++){
    var dom=document.getElementById("xxx");
    dom.innerHTML=dom.innerHTML+i;
}
//变量缓存DOM引用
var dom=document.getElementById("xxx");
for(var i=0;i<100;i++){
    dom.innerHTML=dom.innerHTML+i;
}

2. Use createDocumentFragment () method creates a DOM debris container;

//基本方式
var dom=document.getElementById("xxx");
for(var i=0;i<100;i++){
    var cre_dom=document.createElement("xxx");
    dom.appendChild(cre_dom);
}
//使用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);

3. Better performance using querySelectAll () access the DOM node;
4. Use CSS3 animations mechanism, open hardware acceleration, calculated to render GPU;

Reference article: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/