The browser rendering engine improves the css rendering speed ., Css Rendering

The browser rendering engine improves the css rendering speed ., Css Rendering

I. Rendering Engine
The rendering engine is responsible ...... Rendering, that is, display the request content on the browser screen.
By default, the rendering engine can display HTML, XML documents, and images. You can use the plug-in (browser extension) to display other types of documents.

Ii. Various rendering engines
The Firefox and Safari browsers we mentioned are built on two rendering engines:
Firefox uses Gecko-Mozilla's own rendering engine; Safari and Chrome both use Webkit.

The difference in page effects that ultimately determine the browser's performance is: the Rendering Engine (also called the typographical Engine), which we usually call the "browser kernel ", parses webpage syntaxes (such as HTML and JavaScript) and renders and displays webpages. The effects of the same Code on different browsers are different, which may be caused by different browser kernels.

3. Main Process
The rendering engine starts to obtain request content from the network layer. Generally, it is a data block of no more than 8 KB. The following is the basic workflow of the rendering engine:

Basic workflow of the rendering engine (parse HTML to build a DOM tree, render tree construction, render tree layout, and draw a rendering tree ).
1. parse HTML to reconstruct the DOM tree (Parsing HTML to construct the DOM tree): the rendering engine starts to parse HTML documents and convert tags in the tree to DOM nodes, it is called the "content tree ".
2. Render tree construction: parse CSS (including external CSS files and style elements), calculate the node style based on the CSS selector, and create another tree-rendering tree.
3. Layout of the render tree: recursively calls from the root node to calculate the size and position of each element, give the exact coordinates of each node on the screen.
4. Painting the render tree: traverses the rendering tree, and each node is drawn using the UI backend layer.

It must be understood that this is a slow process. For a better user experience, the rendering engine will try to display the content as soon as possible. It does not create and layout the rendering tree until all HTML files are parsed. It displays the processed partial content while processing the subsequent content.

Iv. Main Process examples

Figure 2: Main Webkit Processes

Figure 3: Main Gecko rendering engine process of Mozilla (3.6)

 

As shown in figure 2 and Figure 3, although Webkit and Gecko use slightly different terms, this process is basically the same.
In Gecko, formatted visual elements are called "Frame trees ). Each element is a frame ).
Webkit uses the term "rendering Tree", which is composed of "rendering objects.
In Webkit, "layout" is used to indicate the layout of elements, and Gecko is called "Reflow ".
Webkit uses "Attachment" to connect DOM nodes and visualization information to build a rendering tree.
A small non-semantic difference is that Gecko has an additional layer between HTML and DOM trees, called "content sink", which is the factory for creating DOM objects.

The main process is to build a dom tree. Each element to be displayed on the page is created in this dom tree. Every time a new element is added to this dom tree, the browser will query the css style sheet through the css engine and find the style rules that match the element and apply them to this element.

V. How the browser matches CSS

In the browser, CSS matching is performed from right to left.For example, DIV # divBoxpspan. red {color: red;}: the browser looks up the following sequence: first, search for all the span elements of class = 'red' in html. Then, check whether the parent element contains the p element, and then determine whether the parent element of p contains the div element with the id divBox. If all elements exist, the CSS matches.

The advantage of the browser searching from right to left is to filter out irrelevant style rules and elements as soon as possible. Firefox calls this query method keyselector (keyword query). The so-called keyword is the last (rightmost) rule in the style rule, and the above key is span. red.

 

6. Optimize your CSS
1. css naming and writing specifications.
Good code looks neat and organized to facilitate future maintenance and management.
2. Avoid using wildcard rules.
* {} Computing times are astonishing! Select only the elements that need to be used.
3.css priority.
Selector weight: inline style: 1000, id selector: 100, class selector: 10, label selector: 1.
Summary in the previous article. What are the CSS selector weights and priority rules?
4. Use less filters, less hack, and less position: absolute ;.
5. Select as few labels as possible, but use class.
For example: # nav li {}, you can add the class name of nav_item to li. Select. nav_item {} as follows {}.
6. Do not use tags to restrict ID or class delimiters.
For example, ul # nav should be simplified to # nav.
For example, div. box {color: # f00 ;}; you can directly use the class name ,. box {color: # f00;} in this way, the browser will find this class and no longer need to match whether the div tag exists. this improves rendering efficiency. Of course, different styles at the same level can be written in this way, but this is not recommended.
7. Use the descendant selector as few as possible to reduce the weight of the selector. the hierarchical relationship of css should not be too deep. Use class to directly replace redundant hierarchical elements.
The overhead of the descendant selector is the highest. Try to minimize the depth of the selector. The maximum length should not exceed three layers. More classes are used to associate each Tag Element.
For example,. box. box-con. box-list li {line-height: 24px;} is so long... Increase the amount of code to reduce development efficiency. As I just said, css rendering is from top to bottom, from right to left
So you can directly write it like this. box-list li {line-height: 24px ;};
8. Use the simplified style.
For example, margin: 10px. the browser will interpret it as having 10 PX external patches on top, bottom, and right. Margin: The 0 10px browser resolves to an external patch with 10 PX on the left and right.
9. Do not make the tiled background image too small, affecting the rendering speed.
10. Be cautious when using float.
11. Do not empty the class.
Do not empty the class or the class that does not exist in the html code. This is meaningless.
12. Use inheritance attributes.
Consider inheritance to understand which attributes can be inherited, and then avoid specifying rules for these attributes repeatedly.

<style>　　a:link,a:visited{color:#0000FF}　　a:hover,a:active{color:#FF0000}　　#zishu a:link,#zishu a:visited{ font-weight:bold}　　#zishu a:hover,#zishu a:active{ font-style: italic;}</style><div><a href="#">test</a><div><div id="zishu"><a href="#">jb51.net</a></div>

13. Rational Layout (modular layout ).
Styles can be divided into basic classes and extension classes; modular layout:
The style of the module is basically the same as that of the base class. Different classes are called extension classes when the class is used again.
14. In css rendering efficiency, the efficiency of id and class is basically the same.
The class is cached during the first loading and will have better results in the cascade. Using id in the root element will be better (id has a subtle speed advantage ).