This is mainly divided into five sectors to find the answer asymptotic lines, respectively [DOCTYPE and what is the role], [process] browser rendering, redraw Reflow [], [] redraw Repaint, many of which are directly used by himself white words.
First, what is the role and DOCTYPE
1.DTD (Document Type Definition): DTD is tell me what browser type, browser based on what the judge to resolve rendering it. The DOCTYPE tells the browser which DTD (Document Type)
such as:
① h5 embodiment, <! DOCTYPE html>, which is a DTD html type wherein
②HTML4.01 Strict (remember this on the line, the following is too long to remember)
<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
③ traditional model Transitional (remember this on the line, the following is too long to remember)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Second, the browser rendering process
We look at a map
We introduce process:
① become the first HTML DOM Tree by HTML parser.
② style sheets become CSS Rules Tree by css parser.
③DOM Tree and CSS Tree merged into Render Tree
④ Layout layout Render Tree
⑤Painting draw Render Tree
Some important concepts:
Tree the DOM : browser parses the HTML into a tree data structure.
Rule Tree CSS : CSS browser will parse tree data structure.
Render Tree : the DOM and CSSOM (CSS Object Model: CSS Object Model) to generate the combined Render Tree.
layout : With the Render Tree, the browser has to know which nodes have a web page, CSS definitions of the various nodes and their affiliation, thereby to calculate the location of each node screen.
Painting : calculated in accordance with the rules by the graphics card, the contents drawn on the screen.
reflow (redraw) : When the browser find a section there was a bit changes affect the layout, you need to go back and re-rendering, this process is called rollback, called reflow.reflow will go <html> From the beginning of this root frame recursive next, all the nodes sequentially calculated geometry and position. feflow is almost inevitable.
Third, the rearrangement Reflow
repaint (rearrangement) : also known as reflux, DOM structure of each element has its own box (model), which require browser through the results of various styles the element into the position it appears, this process is called re row.
How will trigger rearrangement:
- Dom element position and size variations
- Add and remove elements of dom
- Activation pseudo-classes
- The window size changes
- Add and delete class style
- Dynamically calculated modify css styles
Of course, we will not every browser reflow are executed immediately, but will accumulate a number, this process is also known as asynchronous reflow, or incremental asynchronous reflow. But in some cases the browser will not do, such as: resize the window, change the default font page, and so on. For these operations, the browser will immediately be reflow.
Fourth, redraw Repaint
Repaint (redraw) : refers to the change css style , but the same size and dimensions of the elements , and to cause a redrawing node.
How will trigger the redrawing look:
Any style elements, such as background-color, border-color, visibility and other attributes of the change. css and js may cause redraw.
How to minimize redraw:
Mr. into a DOM fragment is then added in one portion to this node.
Code Example:
$('body').css('color', 'red'); // repaint
$('body').css('margin', '2px'); // reflow, repaint
var bstyle = document.body.style; // cache
bstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; // 再一次的 reflow 和 repaint
bstyle.color = "blue"; // repaint
bstyle.backgroundColor = "#fad"; // repaint
bstyle.fontSize = "2em"; // reflow, repaint
// new DOM element - reflow, repaint
document.body.appendChild(document.createTextNode('dude!'));
Precautions:
1.display: none of the nodes will not be added to Render Tree, and visibility: hidden will, so if a node is not the beginning of the show, set to display: none is best
Reference article:
https://segmentfault.com/a/1190000016458627#item-4
