CSS Performance Optimization

Most front-end developers do not care about CSS performance optimization. In fact, an efficient selector can still improve the performance of a complex page. 1. the CSS selector browser analyzes the class from right to left. Its matching rules are matched from right to left. Therefore, the rightmost selector is the key selector. Descendant selector # toc> li {font-weight: bold} the browser first looks for all the "li" nodes on the page and then makes further judgments: if the id of its parent node is "toc", the match is successful. Descendant selector # toc li {font-weight: bold} is much slower than the previous "child selector. The browser first facilitates all the "li" nodes, and then step up the parent node until the DOM structure root node (document), if a node id is "toc ", the match is successful. Otherwise, search for the next "li" node. Avoid universal rules [hidden = "true"] {...} /* A universal rule */The matching rules here are obvious: Find all nodes on the page. If A node has the "hidden" attribute and its attribute value is "true ", the match is successful. This is the most time-consuming and labor-consuming matching. All nodes on the page need to perform matching operations. Such rules should be avoided as much as possible. Id-categorized rule and tag name or class rule parallel button # goButton {...}; ----- >># goButton. fundation # testIcon {...}; ----- >># testIcon here, according to our general understanding, the writing on the left of the Arrow seems to be faster, because it has more restrictions. In fact, IDs are globally unique. When matching the CSS selector, the browser finds that the id is the fastest. If there are other non-id selector, the matching efficiency will be affected. About the class-categorized rule button. indented {...} ----->. button-indented {...} programmers often add a Tag Name to the front of a Class to locate the node more accurately and quickly, but this is often less efficient. Similar to the principle in listing 8, the class on the page should be unique globally. It is faster to locate a node with a unique Class name than to locate a node in combination. In fact, this approach can also avoid the style failure caused by the development and modification of the page element type (Tag), so that the style and element are separated and maintained independently. Minimize the number of rules Span [mailfolder = "true"]> table> tr> td. columnClass {...} ------------------- >>>>>>>. span-mailfolder-tbl-tdCol {...} the more rules, the slower the matching. the above rule requires six matches. First, find "columnClass", then "td", then "tr", "table ", the last is the span that matches the "mailfolder" with "true", which is very slow. If you use a special class replacement (span-mailfolder-tbl-tdCol), the efficiency will be several times faster. Avoid using descendant selector treehead treerow treecell {...} -----> treehead> treerow> treecell {...} the Descendant selector is a time-consuming selector. In general, it should be used in CSS as much as possible. If it can be replaced by the child selector, try to do this. Using the CSS Inheritance Mechanism, many CSS attributes can be inherited in CSS. If the parent node of a node has set the CSS style (such as: color, font ...), In addition, you do not need to change the style of the subnode, so you do not need to set the relevant settings. At the same time, you can also use this: if many subnodes need to set the CSS attribute value, you can set the CSS attribute of the parent node in a unified manner. As a result, no additional settings are required for all child nodes, accelerating the CSS analysis efficiency. 2. place Stylesheets in the HTML page header. After all stylesheets 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. This is why stylesheet should be placed in the header. If it is placed at the bottom of the HTML page, the page rendering is not only waiting for the loading of stylesheet, but also waiting for the loading of html content, so that the user can see the page later. 3. Avoid using CSS Expressions: Background-color: expression (new Date (). getHours () % 2? "# B8D4FF": "# F08A00") Expression is only supported by IE, and its execution is more frequent than most people think. Not only will the page be rendered and resized (resize), but will also be executed when the page is rolled (scroll), or even when the mouse slides on the page. Adding a counter in expression will know that expression execution is quite frequent. The Scroll of the mouse can easily make the expression run more than 10000 times. 4. Avoid using Filter: The 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. 5. CSS Abbreviation: CSS abbreviation allows you to define a series of style attributes with very few codes. This method can greatly reduce the amount of code to improve performance.