Principles and optimization of page rendering and CSS in browsers

When writing CSSCodeTo improve the CSS rendering speed.

How does a browser render and load pages?

Why is loading slow when some websites are opened, and the whole page is displayed at the same time, while some websites are gradually displayed from top to bottom? To understand this, you can start with the following general process:

1. The download order of the browser is from top to bottom, and the rendering order is from top to bottom. The download and rendering are performed simultaneously.
2. When rendering a part of a page, all the above parts have been downloaded (not to say that all associated elements have been downloaded ).
3. If you encounter a semantic label embedded file (JS script, CSS style), then the IE download process will enable separate connections for download.
4. In addition, after the download, parse and stop downloading all the elements on the page.
5. After the style sheet is downloaded, it will be parsed together with all the previously downloaded style sheets. After the parsing is completed, all the elements (including previously rendered) will be re-rendered.
6. If there is a redefinition in JS and CSS, the post-defined function will overwrite the pre-defined function.
7. The key here is the three points 2-5. The rendering efficiency is related to the following three points:
   1. Query and positioning efficiency of CSS Selector
   2. Rendering mode andAlgorithm
   3. Size of the content to be rendered

What are the advantages of CSS and CSS?

What is cascadingstylesheets? * CSS is the simple name of cascadingstylesheets. * CSS is a markup language. It does not need to be compiled and can be interpreted and executed directly by the browser ). * In the standard webpage design, CSS is used to display the webpage content (XHTML. * a css file is also a text file that contains some CSS markup. CSS files must be suffixed with file names. * You can simply change the CSS file to change the overall form of the webpage and reduce our workload. Therefore, she is a required course for every web designer. * CSS is generated and maintained by W3C CSS working groups.

Using CSS + Div for web page reconstruction has the following three significant advantages compared with the traditional table web page layout:

1. Separation of representation and content separates the design part and stores it in an independent style file. html files only store text information. Such pages are more friendly to search engines.
2. Improving the page browsing speed for the visual effect of the same page, the size of the page reconstructed by CSS + div is much smaller than the size of the page file encoded by table. The former is generally only 1/2 of the size of the latter. Browsers Do not need to compile a large number of lengthy labels.
3. Easy Maintenance and revision you only need to modify several CSS files to redesign the entire website page.

How the browser matches CSS

Browser CSS matchingIs to search from right to left.For example, div # username P span. 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 username. 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.

Optimize Your CSS

I. CSS naming and writing standards (good code looks neat and organized to facilitate future maintenance and management)
2. CSS priority; selector weight: inline style: 1000, Id selector: 1000, class selector: 10, label selector: 1 pay attention to the weight issue.
3. Use less filters, less hack, and less position: absolute ;.
4. Use inheritance attributes.
5. Use a short style, such as margin: 10px. the browser will interpret it as a patch with 10 PX on top, right, and right. Margin: The 0 10px browser resolves to an external patch with 10 PX on the left and right.
6. Do not use the tag name before the ID selector and class selector, 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. Do not use class to directly replace redundant level elements in the hierarchical relationship of CSS. 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. Do not make the tiled background image too small, which affects the rendering speed.
9: Be cautious when using float.
10: rational layout (modular layout); style can be divided into base class and extension class; modular layout: the style of the module is basically the same as that of the base class, different classes are defined as extension classes by reusing classes.

11: In css rendering efficiency, the efficiency of ID and class is basically equivalent.

The class is cached in the first load and will have better results in the cascade. Using ID in the root element will be better (ID has a subtle speed advantage ).

In css rendering efficiency, the efficiency of ID and class is basically equivalent.

The class is cached in the first load and will have better results in the cascade. Using ID in the root element will be better (ID has a subtle speed advantage ).