前端性能优化之CSS详细解读

避免使用@import

外部的CSS文件中使用@import会使得页面在加载时增加额外的延迟。

一个CSS文件first.css包含了以下内容：@import url(“second.css”)。浏览器先把first.css下载、解析和执行后，发现及处理第二个文件second.css。简单的 解决方法是使用<link>标记来替代@import，并行下载CSS文件，从而加快页面加载速度.

 

避免AlphaImageLoader滤镜

什么是AlphaImageLoader？IE独有属性，用于修正7.0以下版本中显示PNG图片的半透明效果。

问题：浏览器加载图片时它会终止内容的呈现并且冻结浏览器，在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支。

解决方案：1、PNG8格式来代替，这种格式能在IE中很好地工作。

              2、确实需要使用AlphaImageLoader，使用下划线_filter，使IE7以上版本的用户无效。

 

避免CSS表达式

例：background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );

CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。

问题：在页面显示和缩放、滚动、移动鼠标时都会要 重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

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

 

避免通配选择器

在学习CSS初期，我们在做网页的时候经常会使用*{margin：0；padding：0;}，以此来消除标签的默认布局和不同浏览器对于同一个标签的渲染。

而我们有时候会看到reset的写法。body,p,h1,h2,h3,h4,h5,input,select,textarea,table{margin：0；padding：0;}

这些人为什么要这么写，下面的内容我们会得到答案

 

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

 

CSS选择器是从右到左进行规则匹配。所以在浏览器中这条语句实现为：

 

浏览器遍历页面中所有的a元素——>其父元素的id是否为header。

 

 

 

例：#header  a {font-weight:blod;}

 

这个例子比上一个消耗的时间更多

 

遍历页面中所有a元素——>向其上级遍历直到根节点

 

 

例：.selected * {color: red;}

 

匹配文档中所有的元素——>分别向上逐级匹配class为selected的元素，直到文档的根节点

 

 

所以我们应该避免使用通配选择器。

 

移除无匹配的样式

第一，删除无用的样式后可以缩减样式文件的体积，加快资源下载速度；

第二，对于浏览器而言，所有的样式规则的都会被解析后索引起来，即使是当前页面无匹配的规则。移除无匹配的规则，减少索引项，加快浏览器查找速度；

 

避免单规则的属性选择器

浏览器匹配所有的元素——>检查是否有href属性并且herf属性值等于”#index”——>分别向上逐级匹配class为selected的元素，直到文档的根节点。

 

避免类正则的属性选择器

正则表达式匹配会比基于类别的匹配会慢很多。大部分情况下我们应尽量避免使用 *=， |=， ^=， $=， 和 ~=语法的属性选择器。