把 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 ------>> #3691、 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
版权声明:本文为博主原创文章,未经博主允许不得转载。
查看更多关于css性能调优_html/css_WEB-ITnose的详细内容...