How browsers work-page loading, how Pages load

Source: Internet
Author: User

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:

  • One is HTML/SVG/XHTML. In fact, Webkit has three C ++ classes that correspond to these three types of documents. Parsing these three files generates a DOM Tree.
  • CSS. parsing CSS produces the CSS rule tree.
  • Javascript and scripts are mainly used to operate DOM Tree and CSS Rule Tree through dom api and cssom api.

2) After parsing, the browser engine constructs the Rendering Tree through the DOM Tree and CSS Rule Tree. Note:

  • The Rendering Tree is not equivalent to the DOM Tree, because something like Header or display: none does not need to be placed in the Rendering Tree.
  • The CSS Rule Tree is mainly used to complete the matching and append the CSS Rule to each Element on the Rendering Tree. That is, the DOM node. That is, the so-called Frame.
  • Then, calculate the position of each Frame (that is, each Element), which is also called the layout and reflow processes.

3) Finally, call the Native gui api to draw the image.

DOM Parsing

Html 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 Parsing

The 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.

Rendering

The 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.

  • Repaint-a part of the screen needs to be re-painted. For example, the background color of a CSS changes. However, the geometric size of the element remains unchanged.
  • Reflow -- it means that the geometric size of the component has changed. We need to re-verify and calculate the Render Tree. Is a part or all of the Render Tree. This is Reflow or Layout. (HTML uses flow based layout, that is, stream layout. Therefore, if the geometric size of a component changes, you need to re-layout the component, that is, reflow.) Reflow recursively calculates the geometric sizes and positions of all nodes from the root frame of

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.

  • When you add, delete, or modify a DOM node, the Reflow or Repaint
  • When you move the DOM position or make an animation.
  • When you modify the CSS style.
  • When you Resize the window (the mobile end does not have this problem), or scroll.
  • When you modify the default font of a webpage.

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:

  • Initial. Page initialization.
  • Incremental. Some Javascript code is used to operate the DOM Tree.
  • Resize. The size of some of its components has changed.
  • StyleChange. If the CSS attributes change.
  • Dirty. Several Incremental reflows occur on the Child tree of the same frame.

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/repaint

Below 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:

  • Use the documentFragment object to operate the DOM in the memory
  • First, give the DOM to display: none (reflow once), and then you can change it as you want. For example, you can modify it for 100 times and then display it.
  • Clone a DOM node to the memory, and change it as needed. After the change, exchange it with the online one.

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.