css 性能调优_html/css_WEB-ITnose

CSS 的性能优化：

1. Style 标签的相关调优
2. 特殊的 CSS 样式使用方式
3. CSS 缩写(color,上下左右合并等)
4. CSS 的声明（页面上的 class 在全局范围内来讲应该是唯一的，用唯一的 Class 名称来定位一个节点往往比组合定位更加快捷。样式与元素的分离，两者独立维护）
5. CSS 选择器（id选择器效率最高，其他子选择器，匹配都会减慢速度）（child,不用太泛的选择器）
6. css的style样式单词简写优化（不要用太长的名称）
7. 标点符号优化（删除空格，删除换行，去掉选择器最后的一个分号？？）
8. css重用优化 （共用代码块）
9. 注意利用css的继承机制

把 Stylesheets 放在 HTML 页面头部：

对于 @import 和 两种加载外部 CSS 文件的方式：@import 就相当于是把 标签放在页面的底部，所以从优化性能的角度看，应该尽量避免使用 @import 命令

避免使用 CSS Expressions：

CSS Expression 案例

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

Expression 只有 IE 支持，而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行，页面滚动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道，expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。

避免使用 Filter：

IE 特有的 AlphaImageLoader filter 是为了解决 IE6 及以前版本不支持半透明的 PNG 图片而存在的。但是浏览器在下载 filter 里面的图片时会“冻结”浏览器，停止渲染页面。同时 filter 也会增大内存消耗。最不能忍受的是 filter 样式在每个页面元素（使用到该 filter 样式）渲染时都会被浏览器分析一次，而不是像一般的背景图片渲染模式：使用过该背景图片的所有元素都是被浏览器一次性渲染的。

针对这种情况，最好的解决办法就是使用 PNG8。

CSS 缩写：

CSS 缩写，用极少的代码定义一系列样式属性，优化、合并、简写、极大程度的缩减代码量，减少css文件的占用字节，加快网页下载速度和网页加载打开速度，以达到提高性能的目的。

 Color 缩写的方式，一般参照两个重复的进行一次缩写

 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;  ----->>  font: italic small-caps bold 1em 140% sans-serief 

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

1、 CSS 文本： font-size:12px;  font-weight:bold;  font-family:Arial, Helvetica, sans-serif;  line-height:22px;即可简写缩写为 font:12px/22px bold Arial, Helvetica, sans-serif;

2、 CSS 背景 ：background-color:#F00;background-image:url(图片地址);background-position:bottom;background-repeat:no-repeat; 即可将背景CSS属性缩写为： background :#F00 url(图片地址) no-repeat left bottom;www.divcss5.com缩写介绍。

3、css内边距padding、css外边距margin、css 边框border等,避免上下左右分开写，以减少css代码。

4、字体粗细，font-weight:bold(改成font-weight:700;)font-weight:normal(改成font-weight:400;)。

5、使用DW正则表达式批量替换实例 http://oa.yubooa.com/html/4588.html

参考了以下文档：

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

http://www.divcss5.com/rumen/r115.shtml

版权声明：本文为博主原创文章，未经博主允许不得转载。