CSS performance tuning to improve Web application performance

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, @import is equivalent to placing the <link> tag at the bottom of the page, so you should try to avoid using @import commands from an optimized performance perspective.

Avoid using CSS Expressions:

Background-color:expression (New Date ()). GetHours ()%2? "#B8D4FF": "#F08A00")

Expression is supported only 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: Abbreviations

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

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

. 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;  }

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)}

Many CSS properties can be inherited, such as: color, font, etc. ..., and the child node does not need to change the style, no need to make the relevant settings

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, and so on. Some of the 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.

Reference Learning

• CSS Wiki:http://en.wikipedia.org/wiki/css A Web site that shares CSS development knowledge, providing examples and explanations for many of the CSS.
• CSS Standard: http://www.w3.org/TR/CSS21/provides a lot of CSS standards and usage guidelines, there are many classic examples.
• "JavaScript performance tuning for improved Web application Performance" (developerworks,2011 July): JavaScript is a sophisticated front-end development language that is widely used in today's web development, especially for Web 2.0 applications. As Web 2.0 becomes more popular today, we will find that there will be a lot of JavaScript code in our Web application project, and it will be more and more in the future. JavaScript, as a language for interpreting execution, and its single-threaded mechanism, determines that performance issues are a weakness of JavaScript and a problem that Web software engineers need to attach great importance to when writing JavaScript, especially for Web 2.0 applications. The vast majority of web software engineers are more or less experiencing the poor performance of Web 2.0 applications that are being developed, mainly due to the lack of JavaScript performance and the heavy browser load. However, it is not easy to solve the performance problems of this interpretation execution and single-threaded operation language. This article highlights some of the techniques and best practices for JavaScript performance tuning in development, as well as some of the ways in which JavaScript operates DOM nodes for performance tuning.
• "Using Dojo's Ajax app to develop advanced tutorials, part 3rd: In-depth understanding of CSS" (developerworks,2010 September): CSS as the standard technology for controlling display in HTML pages, has become familiar to the vast Web developers. Although the syntax of CSS itself is relatively simple, it is not easy to write and manage CSS in complex Web applications. This article discusses some of the more complex and error-prone parts of the CSS specification, then discusses browser compatibility and how to develop maintainable CSS, and finally introduces the relevant frameworks and tools as well as the API support provided by Dojo.
• DeveloperWorks Web Development Zone: Extend your skills in web development with articles and tutorials dedicated to web technology.
• DeveloperWorks Ajax Resource Center: This is a one-stop center for information about AJAX programming models, including many documents, tutorials, forums, blogs, wikis, and news. Any new Ajax information can be found here.
• The DeveloperWorks Web 2.0 Resource Center, a one-stop Center for Web 2.0-related information, includes a large number of Web 2.0 technical articles, tutorials, downloads, and related technical resources. You can also quickly learn about the concepts of Web 2.0 through the Web 2.0 starter section.
• Check out the HTML5 topic for more information and trends related to HTML5.

Discuss

• Join DeveloperWorks Chinese community. View developer-driven blogs, forums, groups, and wikis, and communicate with other DeveloperWorks users.

CSS performance tuning to improve Web application performance