Home > Developer > JavaScript
How browsers work-page loading, how Pages load
Browser Workflow
Let's look at the figure:
From the figure above, we can see several things:
1) the browser will parse three things:
2) After parsing, the browser engine constructs the Rendering Tree through the DOM Tree and CSS Rule Tree. Note:
3) Finally, call the Native gui api to draw the image.
DOM ParsingHtml dom Tree Parsing is as follows:
| 123456789101112 | <html><html><head> <title>Web page parsing</title></head><body> <div> <h1>Web page parsing</h1> <p>This is an example Web page.</p> </div></body></html> |
The above HTML will be parsed as follows:
The following is another scenario with SVG labels.
CSS ParsingThe parsing of CSS is like the following (Gecko is the method of Firefox). Suppose we have the following HTML document:
| 123456789 | <doc><title>A few quotes</title><para> Franklin said that <quote>"A penny saved is a penny earned."</quote></para><para> FDR said <quote>"We have nothing to fear but <span>fear itself.</span>"</quote></para></doc> |
The DOM Tree looks like this:
Then our CSS document is like this:
| 1234 | /* rule 1 */ doc { display: block; text-indent: 1em; }/* rule 2 */ title { display: block; font-size: 3em; }/* rule 3 */ para { display: block; }/* rule 4 */ [class="emph"] { font-style: italic; } |
So our CSS Rule Tree will look like this:
Note that the 4th rules shown in the figure appear twice, once independent, and once at the subnode of rule 3. Therefore, we can know that setting up a CSS Rule Tree is better than following the DOM Tree. CSS matches the DOM Tree mainly by parsing the CSS Selector from right to left. Many people think it will be faster, but it is not necessarily. The key is how to write the CSS Selector.
Note: matching HTML elements with CSS is quite complicated and has performance problems. Therefore, you will see many people tell you in N many places that the DOM tree is small and CSS should use id and class as much as possible. Do not cascade them over and over ,......
Through these two trees, we can get a Style Context Tree, that is, the following (Attach the CSS Rule node to the DOM Tree ):
Therefore, Firefox basically generates the CSS Rule Tree through CSS parsing, and then generates the Style Context Tree by comparing the DOM, and Firefox uses the Style Context Tree and Its Render Tree (Frame Tree) association. Note: The Render Tree removes invisible nodes. WhileThe so-called Frame in Firefox is a DOM node and should not be confused by its name..
Note: Unlike Firefox, Webkit does not use two trees To Do This. Webkit also has a Style object, which directly stores the Style object on the corresponding DOM node.
RenderingThe rendering process is basically as follows (four steps in yellow ):
Note: There are many connection lines in the process. This means that Javascript dynamically modifies the DOM attribute or CSS attributes, leading to re-Layout. Some changes won't, that is, those arrows pointing to the sky, for example, the modified CSS rule is not matched.
Here we need to talk about two concepts: Reflow and Repaint. These two are not the same thing.
The cost of Reflow is much higher than that of Repaint. Each node in the DOM Tree will have a reflow method. The reflow of a node may lead to a child node, or even a reflow of the parent and peer nodes.There may be nothing on some high-performance computers, but if reflow occurs on a mobile phone, this process is very painful and consumes power..
Therefore, the following actions may be costly.
Note: display: none triggers reflow, while visibility: hidden only triggers repaint because no location change is found.
For more information about scrolling, if all the pixels on our page are rolled during scrolling, there is no performance problem, because our graphics card is very fast for this algorithm to move the full screen pixels up and down. However, if you have a fixed background image, or some elements do not scroll along, and some Elment is an animation, the scrolling action is quite painful for the browser. You can see that many of these web pages have poor performance when scrolling. Because scrolling may also cause reflow.
Basically, reflow has the following reasons:
Let's look at an example:
| 123456789101112 | var bstyle = document.body.style; // cache bstyle.padding = "20px"; // reflow, repaintbstyle.border = "10px solid red"; // Reflow and repaint bstyle.color = "blue"; // repaintbstyle.backgroundColor = "#fad"; // repaint bstyle.fontSize = "2em"; // reflow, repaint // new DOM element - reflow, repaintdocument.body.appendChild(document.createTextNode('dude!')); |
Of course, our browser is smart. It won't reflow or repaint every time you change the style as above.Generally, browsers accumulate such operations and reflow them once. This is also called asynchronous reflow or incremental asynchronous reflow.. But in some cases, the browser does not do this, for example: resize window, changed the default page font, and so on. For these operations, the browser will immediately reflow.
However, sometimes our script will prevent the browser from doing this. For example, if we request the following DOM values:
Because, if our program needs these values, the browser needs to return the latest values, which will flush out some style changes, resulting in frequent reflow/repaint.
Reduce reflow/repaintBelow are some Best Practices:
1) do not modify the DOM style one by one. In this case, it is better to pre-define the css class and then modify the DOM className.
| 1234567891011 | // badvar left = 10,top = 10;el.style.left = left + "px";el.style.top = top + "px"; // Goodel.className += " theclassname"; // Goodel.style.cssText += "; left: " + left + "px; top: " + top + "px;"; |
2) modify the DOM offline. For example:
3)Do not put the value of the DOM node in a loop as a variable in the loop.Otherwise, a large number of attributes of this node will be read and written.
4)Modify the DOM with a lower level as much as possible. Of course, changing the DOM at the bottom of the hierarchy may cause a large area of reflow, but it may also have a small impact scope.
5)Use the position of fixed or absoult for the HTML element of the animation, Then they will not modify their CSS reflow.
6)Do not use table layout. A small change may cause the entire table to be re-laid.
PS: original
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
