[Go] CSS performance tuning to improve Web application performance

Brief introduction

Web development often encounters performance issues, especially Web 2.0 applications. CSS code is the most direct "tool" to control the display style and effect of the page, but they are often overlooked by WEB development engineers when it comes to performance tuning, while the fact that nonstandard CSS can have a serious impact on the efficiency of page rendering, especially for WEB 2.0 pages with complex structures, is an indelible effect. Therefore, writing standard, high-performance CSS code can greatly improve the efficiency of the application. This article focuses on how to optimize and where to optimize the application's CSS code to maximize the performance of WEB applications.

Back to top of page

CSS Performance Tuning

CSS code analysis and rendering are done by the browser, so, understanding the browser's CSS working mechanism is essential to our optimization. This article we mainly from the following aspects to introduce the performance optimization of CSS:

1. Related tuning of Style tags
2. How to use special CSS styles
3. CSS Abbreviations
4. Declaration of CSS
5. CSS Selector

Put 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.

For @import and <link> two ways to load external CSS files: @import is the equivalent of placing <link> tags at the bottom of the page, so you should try to avoid using @import commands from an optimized performance perspective.

Avoid using CSS Expressions:

Refer to the following code:

Listing 1. CSS Expression Case

PADDING:6PX 0px; border:0px; outline:0px; Vertical-align:baseline; Font-family:arial, Sans-serif; Color:rgb (34, 34, 34); Line-height:1.5em; Font-size:1.166em!important; " >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.

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.

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.

Listing 2. Colour abbreviation

#000000     ------>>     #000  #336699     ------>>     #369

For color, duplicate attribute values can be omitted.

Listing 3. Various abbreviation methods

margin-top:2px;  margin-right:5px;  Margin-bottom:2em;  margin-left:15px;     ----->>     margin:2px 5px 2em 15px;  border-width:1px;  Border-style:solid;  Border-color: #000     ----->>     border:1px solid #000  font-style:italic;  Font-variant:small-caps;  Font-weight:bold;  Font-size:1em;  line-height:140%;  Font-family:sans-serif;  ----->>  font:italic small-caps bold 1em 140% sans-serief  background-color: #f00;  Background-image:url (background.gif);  Background-repeat:no-repeat;  background-attachment:fixed;  background-position:0 0;   ----->>background: #f00 url (background.gif) no-repeat fixed 0 0  list-style-type:square;  List-style-position:inside;  List-style-image:url (image.gif)  ----->> list-style:square inside URL (image.gif)

Multiple Declarations

There is also a shorthand for the class declaration and definition of CSS.

Listing 4. The Declaration of Class

. Class1{position:absolute; left:20px; top:30px;}. Class2{position:absolute; left:20px; top:30px;}. Class3{position:absolute; left:20px; top:30px;}. Class4{position:absolute; left:20px; top:30px;}. Class5{position:absolute; left:20px; top:30px;}. Class6{position:absolute; left:20px; top:30px;}  -------------------->>>>>>>  Class1 class2 class3. Class5 class6{. Position  : Absolute left:20px; top:20px;  }

This method of Class shorthand can greatly reduce our code and improve the efficiency of browser analysis and recognition.

CSS selector (CSS selectors)

Let's take a look at the following example:

Listing 5. Child Selector

#toc > li {font-weight:bold}

According to our usual understanding, the compiler should look for a node whose ID is "TOC", then find the node of type (tag) "Li" in all his immediate child nodes and apply the "Font-weight" attribute to those nodes.

Unfortunately, on the contrary, the browser is "right-to-left" to analyze class, and its matching rules are matched from right to left. Here, 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.

So, CSS selectors match far more slowly than we think, CSS performance problems should not be ignored.

Listing 6. 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.

Listing 7. 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.

Listing 8. 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.

Listing 9. 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.

Listing 10. 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.

Listing 11. 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.

Listing 12. Using the inheritance mechanism of CSS

Color  Font  letter-spacing  line-height  list-style  text-align  text-indent  Text-transform  white-space  word-spacing  #bookmark  >. menu-left {list-style-image:url (Blah)}  ------------>>>>>>>>  #bookmark  {list-style-image:url (Blah)}

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.

Back to top of page

Conclusion

This article introduces some of the small details about CSS performance in WEB development, starting with the CSS itself, and introduces some of the ways to avoid writing CSS code, such as the drawbacks of CSS Expression, CSS abbreviations, and considerations for CSS selectors, etc., as well as sharing a More recommended practices. We can pay attention to these small details during the development process in order to improve the performance of our Web application as much as possible.

Source:

http://www.ibm.com/developerworks/cn/web/1109_zhouxiang_optcss/

[Go] Improve CSS performance tuning for Web App performance