css 性能调优

当前位置 : 首页 > 网页制作 > CSS > css 性能调优

css 性能调优

来源: 作者: 时间:2016-01-20 09:22
CSS 的性能优化:Style 标签的相关调优特殊的 CSS 样式使用方式CSS 缩写(color,上下左右合并等)CSS 的声明(页面上的 class 在全局范围内来讲应该是唯一的,用唯一的 Class 名称来定位一个节

CSS 的性能优化:

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


     
Tag:
网友评论

<