当前位置:Gxlcms > html代码 > css性能调优_html/css_WEB-ITnose

css性能调优_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:21人阅读

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




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

人气教程排行