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

Posted 2020-07-12

1、把样式表置于顶部

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

2、避免使用CSS表达式（Expression）

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

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

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

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

3、避免通配选择器

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

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

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

1 　#header  a {...}

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

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

1 　.selected * {...}

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

4、避免使用@import

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

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

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

　　（1）@import先加载HTML，后加载CSS

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

5、避免AlphaImageLoader滤镜

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

1 filter：progid:DXImageTransform.Microsoft.AlphaImageLoader   
2      ( 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）对于浏览器，所有样式规则都会被解析后索引起来，即使是当前页面无匹配的规则！故移除无匹配的规则，减少索引项，加快浏览器查找速度。