WEB前端性能优化之二——css优化

1、把样式表置于顶部

  现把样式表放到文档的< head />内部似乎会加快页面的下载速度。这是因为把样式表放到< head />内会使页面有步骤的加载显示。HTML规范清 楚指出样式表要放包含在页面的< head />区域内:“和< a />不同,< link />只能出现在文档的< head />区域内,尽管它可以多次使用它”。无论是引起白屏还是出现没有样式化的内容都不值得去尝试。最好的方案就是按照HTML规范在文 档< head />内加载你的样式表。

2、避免使用CSS表达式(Expression)

  表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

  CSS表达式是设置动态CSS属性的即强调又危险的方法。IE5开始支持,IE独有。 

 //实现每隔一小时切换一次背景颜色
background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );

  一个减少CSS表达式计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS表达式。如果样式属性 必须在页面周期内动态地改变,使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你 页面的性能产生影响。

3、避免通配选择器

 优化选择器的原则是减少匹配时间。CSS选择器的匹配机制是:从右向左进行规制匹配的!

 #header > a { font-weight:blod; }

  上面这条规制实际是浏览器遍历页面所有a元素,并确定其父元素的id是否为header。
   

  #header  a {...}

  后代选择器开销更大,在遍历页面的所有a元素后,会需向上遍历直到根节点。

  由此可知,选择器最右边的规制 往往决定了向左移匹配的工作量。故最右边的选择规则 称之为关键选择器。
   

  .selected * {...}

  在匹配所有元素后,再分别向上匹配直至根节点。通常比开销最小的ID选择器高出·~3个数量级。

4、避免使用@import

  引入CSS的方法有两种,一种是@import,一种是link

 @import url('地址');
<link href="地址" rel="stylesheet" type="text/css" />

  现在绝大部分的网站都采用后一种link方式,原因在于

  (1)@import先加载HTML,后加载CSS

  (2)link先加载CSS,后加载HTML。
  CSS2.1加入的@import,会使页面在加载时添加额外延迟。
  由于浏览器不能并行下载样式,会导致页面增添额外的往返耗时。而使用<link>能并行下载样式,但任然是多次请求。

5、避免AlphaImageLoader滤镜

  AlphaImageLoaderIE滤镜的一种,其主要作用就是对图片进行透明处理。虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,但是就IE5-IE6而言还是有一定的意义。

 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
( enabled=true|false , sizingMethod=crop|image|scale , src=sURL )

  说明:上述语法结构中各参数的意义如下。

  enabled:可选项,值是布尔值(Boolean)true或者false,用来设置或检索滤镜是否激活,值为true时滤镜激活,该值是默认值,值为false时滤镜被禁止。

  sizingMethod:可选项,用来设置或检索滤镜图片在对象容器边界内的显示方式;crop为剪切图片以适应对象尺寸;image:默认值,增大或减小对象的尺寸边界以适应图片的尺寸;scale为缩放图片以适应对象的尺寸边界。

  src:必选项,使用绝对地址或相对url地址指定背景图像。假如忽略此参数,滤镜将不会起作用。

  完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替,这种格式能在IE中很好地工作。

6、移除无匹配的样式

  (1)删除无用的样式,可缩减样式文件大小,加快加载速度。
  (2)对于浏览器,所有样式规则都会被解析后索引起来,即使是当前页面无匹配的规则!故移除无匹配的规则,减少索引项,加快浏览器查找速度。

 

上一篇:hdu 4507 数位dp(求和,求平方和)


下一篇:c++ 最短路两种算法