CSS Performance Tuning

Performance optimizations for CSS:

2. Related tuning of Style tags
4. How to use special CSS styles
6. CSS abbreviation (color, up or down merge, etc.)
8. CSS declarations (the class on the page should be unique globally, and locating a node with a unique class name is often quicker than combining positioning.) separation of styles from elements, both independently maintained )
10. CSS selectors (the ID selector is the most efficient, the other sub-selectors, matching slows down the speed) (child, not too wide selector)
12. CSS's style style word shorthand optimization (don't use too long names)
14. Punctuation optimization (delete spaces, delete line breaks, remove the last semicolon of the selector??). ）
16. CSS reuse optimizations (common code blocks)
18. Pay attention to the inheritance mechanism using CSS
20. Pull away, split CSS, do not load all CSS

Put stylesheets on the HTML page header: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:CSS Expression Case

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:

CSS abbreviations, with very little code to define a series of style attributes, optimization, merging, shorthand, greatly reduced the amount of code, reduce the consumption of CSS file bytes, speed up the page download speed and Web page loading open speed, in order to achieve the purpose of improving performance.

The Color abbreviation, the general reference two repeats one abbreviation

List-style-type:square;  List-style-position:inside;  List-style-image:url (image.gif)  ----->> list-style:square inside URL (image.gif)

Font-style:italic;  Font-variant:small-caps;  Font-weight:bold;  Font-size:1em;  line-height:140%;  Font-family:sans-serif;  ----->>  

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

1, CSS text: font-size:12px; font-weight:bold; font-family:arial, Helvetica, Sans-serif; line-height:22px; can be abbreviated as FONT:12PX/22PX bold Arial, Helvetica, Sans-serif;

2.CSS background: Background-color: #F00; Background-image:url (image address); background-position:bottom;background-repeat:no-repeat; You can abbreviate the background CSS property to:Background: #F00 url (picture address) No-repeat left bottom;www.divcss5.com abbreviation.
3, CSS padding padding, css margins margin, CSS border border, etc., to avoid the upper and lower left and right to write, to reduce the CSS code. 4, Font weight, font-weight:bold (changed to font-weight:700;) font-weight:normal (changed to font-weight:400;). 5. Use the DW regular expression to replace the instance in bulk http://oa.yubooa.com/html/4588.html


The following documents are referenced:http://www.ibm.com/developerworks/cn/web/1109_zhouxiang_optcss/http://www.divcss5.com/rumen/r115.shtml
http://www.cnblogs.com/dolphinX/p/3508657.html
http://www.cnblogs.com/dolphinX/p/3348460.html
http://www.w3.org/2015/Talks/0109-CSSConf-xq/
http://www.php100.com/html/webkaifa/DIV_CSS/2011/0922/9069.html

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

CSS Performance Tuning