CSS performance optimization and css Optimization

CSS performance optimization and css Optimization
Abstract:

CSS is an Important Role in layout and rendering. Beautiful pages certainly attract users. This article describes the relationship between CSS and performance summarized during the development process. It may be incorrect and I hope to point out it.

1. Put all styles in css files as much as possible. Do not write the style attribute in HTML tags, because the browser starts rendering the entire page only after all styles are loaded, writing in the label attribute will prolong the rendering time of the browser.

2. Delete the default style code

This will affect the browser execution time. For example, align = "left", which is left aligned by default.

3. Reduce relative positioning

This will affect the repain and reflow of the browser. For example, position: absolute

4. CSS abbreviations

CSS abbreviations allow you to define a series of style attributes with very few codes, which can greatly reduce the amount of code to improve performance. For example, replace # ff00ff with # f0f.

5. Merge CSS attributes

Attribute merging reduces the amount of code and the rendering time of the browser to improve performance. For example: font-size: 36px; font-family: Arial; line-height: 48px; font-weight: bold; Replace with font: bold 36px/48px Arial;

6. CSS Selector

• The browser analyzes the class from right to left, and its matching rules are from right to left. Therefore, the rightmost selection character is the key selection character. For example: # parent> a {} and # parent a {}. The browser first searches for all the "a" nodes on the page and then makes further judgments: if the id of its parent node is "parent", the match is successful. The browser first facilitates all the "a" nodes, and then traces back to its parent node step by step until the root node (document) of the DOM structure. If the id of a node is "parent ", the match is successful. Otherwise, search for the next "a" node.

 

• Minimize the number of rules. The more rules, the slower the matching.

• Reduce attribute Selector

7. Avoid using CSS expressions

CSS expressions can only be executed by IE, but are frequently calculated. They are executed not only during page rendering and resize, but also during Page scrolling, even when you move your mouse over the page.

8. Use the inheritance mechanism to reduce CSS

If many subnodes need to set the CSS attribute value, you can set the CSS attribute of the parent node. In this way, no additional settings are required for all subnodes, it accelerates the analysis efficiency of CSS.

9. Place styles in the HTML page header for loading

After all the styles are loaded, the browser starts rendering the entire page. Before that, the browser does not render any content on the page and the page remains blank.

10. Avoid using filters.

AlphaImageLoader filter exclusive to IE exists to solve the problem that IE6 and earlier versions do not support translucent PNG images. However, when the browser downloads the image in the filter, it will "freeze" the browser and stop rendering the page. Filter also increases memory consumption. The most intolerable thing is that the filter style will be analyzed once by the browser when each page element (using the filter style) is rendered, rather than the normal background image rendering mode: all elements that have used the background image are rendered at one time by the browser. In this case, the best solution is to use png8.

11. Use data: image/png; base64 to load images instead of URLs

The Url format of the "data" type is proposed in RFC2397. The purpose is to embed some "small" data in the webpage rather than loading it from an external file.

12. reduce repeated styles. When multiple people develop, multiple people will define the same style. You can use the browser to detect

13. Merge and compress your css files to reduce http requests. You can use tools or automated construction.

14. Use CSS sprite to process your image

 

Summary:

Now the project is paying more and more attention to user experience. In this case, we must write high-performance code and reduce user waiting time.

Css can be optimized

No. etags are the id that the server assigns to each resource;

When there is no difference between the etag of the browser and the etag on the server, it indicates that the file has not been changed and you do not need to request new resources;

Simply put, your server does not enable static resource caching...

CSS Optimization

. Div1 {
Width: 100px; height: 200px;
Background: url(111.gif) no-repeat;
Border: 1px solid #000;
}

. Div2 {
Width: 100px; height: 500px;
Background: url(222.gif) no-repeat;
Border: 1px solid #000;
}

Change the above section to the following section:

. Div1 {
Height: 200px;
Background: url(111.gif) no-repeat;
}

. Div2 {
Height: 500px;
Background: url(222.gif) no-repeat;
}

. Div_w_br {
Width: 10px; border: 1px solid #000;
}

That is to say, the details are not endless. The principle is to write some common things together. If there is more code, the css file size can be saved. Everything has two sides, the optimization is much more readable and sacrifices a lot. It may make you write your own style. You have to watch it for half a day in the last week! Some small programs made of javascript scripts can compress css file code online. This is also the principle. You can search for: css online compression and css online optimization.