Discussion on optimization of CSS performance

Most front-end developers do not care about CSS performance optimization, in fact, for a complex page, the efficient selector can still bring some performance improvement.

1. CSS Selector

The browser is "right to left" to analyze the class, and its matching rules are matched from right to left, so the rightmost selector is the key selector.

• Descendant Selector

  #toc > li {font-weight:bold}

  The browser first looks at all the "Li" nodes on the page and then makes a further judgment: if the ID of its parent node is "TOC", the match succeeds.

• Descendant Selector

  #toc  li {font-weight:bold}

  This efficiency is slower than the previous "child selector" and is much slower. The browser first facilitates all the "Li" nodes, then steps back to its parent node until the root node of the DOM structure (document), if there is a node whose ID is "TOC", the match succeeds, otherwise it continues to find the next "Li" node.

• Try to avoid universal rules

  [hidden= "true"] { ... } /* A Universal Rule */

  The matching rule here is obvious: Find all nodes on the page, and if there is a node with the "hidden" attribute and its property value is "True", the match succeeds. This is the most time-consuming match, and all nodes on the page need to be matched, and this rule should be avoided as much as possible.

• id-categorized rules parallel to tag name or class rules

  Button#gobutton {...}; ----->> #goButton                     . Fundation#testicon {...}; ----->> #testIcon

  Here, according to our conventional understanding, the arrow to the left of the wording seems to be faster, because it is more restrictive. In fact, the ID is globally unique, when matching the CSS selector browser to locate the ID is the fastest, if accompanied by other non-ID selector, but will affect the efficiency of matching.

• About class-categorized Rules

  button.indented {...} ----->>.button-indented {...}

  Programmers often put tag names in front of a Class to locate the node more precisely and quickly, but this tends to be less efficient. Like the principle in Listing 8, the class on the page should be unique globally, and locating a node with a unique class name is often quicker than combining positioning. In fact, this practice can also avoid the development of the page element type (TAG) caused by the style failure, so that the separation of style and elements, both independent maintenance.

• Minimizing the number of rules

  Span[mailfolder= "true"] > table > Tr > Td.columnclass {...}                     ------------------->>>>>>>                     . Span-mailfolder-tbl-tdcol {...}

  The more rules, the slower the match, the above one rule requires 6 matches, first find "Columnclass", then "TD", then "tr", "table", and finally the "Mailfolder" to "true" span, this efficiency is very slow. If you use a special class substitution (span-mailfolder-tbl-tdcol), the efficiency will be several times faster.

• Try to avoid using descendant selector

  Treehead treerow Treecell {...}----->> treehead > Treerow > Treecell {...}

  The descendant selector is a relatively time-consuming selector, generally speaking, its use in CSS should be avoided, if it can be replaced with the child selector should be done as much as possible.

• Using the inheritance mechanism of CSS

  In CSS, there are a lot of CSS properties to inherit, if the parent node of a node has already set the above CSS style (such as: color, font, etc...) ), and the child node does not need to change the style, there is no need to make the relevant settings, but also can take advantage of this: if many child nodes need to set the CSS property value, you can set the CSS property of its parent node, so that all the child nodes without additional settings, speed up the analysis efficiency of the CSS.

2. Place the stylesheets on the HTML page header

The browser will not start rendering the entire page until all the stylesheets have been loaded, and the browser will not render any content on the page until the page is blank. That's why you put stylesheet on your head. If placed at the bottom of the HTML page, page rendering is not just waiting for stylesheet loading, but also waiting for the HTML content to be loaded, so that the user can see the page later.

3. Avoid using CSS Expressions:

font-family:arial; line-height:26px; " >expression is only supported by IE, and his execution is much more frequent than most people think. Not only is the page rendered and resized (resize) executed, but the page is scrolled (scroll), and even when the mouse is sliding on the page, it executes. Adding a counter to expression will tell you that expression is executed quite frequently. Mouse scrolling can easily cause expression to execute more than 10000 times.

4. Avoid using Filter:

The AlphaImageLoader filter specific to IE is intended to address the existence of IE6 and previous versions that do not support translucent PNG images. However, the browser will "freeze" the browser when downloading the image in the filter and stop rendering the page. Filter also increases memory consumption. The most intolerable is that the filter style is parsed by the browser once per page element (using the filter style), rather than as a normal background image rendering mode: All elements that have used the background image are rendered once by the browser. The best solution for this situation is to use PNG8.

5. CSS Abbreviations:

CSS abbreviations allow you to define a range of style attributes with very little code, which can greatly reduce the amount of code to achieve performance improvement purposes.

Reference documents

• Performance Impact of CSS selectors
• Writing Efficient CSS
• Optimize Browser Rendering

For reprint, please specify from: Borishuai front end cultivation > CSS Performance optimization discussion

Discussion on optimization of CSS performance