Css优化

• 把样式表置于顶部

• 避免使用CSS表达式

• 用代替@import

• 避免使用滤镜

1、把样式表置于顶部 

我们发现把样式表放到文档的内部似乎会加快员面的下裁速度,这是因为把样式表放到内会使页面有步骤的加载显示。注重性能的前端服务器往往希望页面有秩序地加载, 同时, 我们也希望浏览器把已经接收到内容尽可能显示出来, 这对子拥有较多内容的页面和网速较慢的用户来说特别重要。当浏览器有序地加裁文件头、导航栏、顶部的1ogo等对于等待页面加载的用户来说都可以作为可视化的反馈,这从整体上改善了用户体验。

把样式表放在文档底部的问题是在包括Intornct Explorer在内的很多浏览器中这会中止内容的有序呈现。浏览器中止呈现是为了避免样式改变引起的页面元

素重绘。用户不得不面对一个空白页面。HTML规范清楚指出样式表要放包含在页面的区域内。

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

CSS表达式是动态设置CSS属性的强大(但危险)方法.Internet Exp1orer从第5个版本开始支持CSS表达式,下面的例子中,使用CSS表达式可以实现隔一个小时切換一次背景颜色：

background-color:expression( (newDate()).getHours0%2 ? ‘#B8D4FF’: ‘#F08A00’);

如上所示, expression中使用了JavaScript表达式. CSS属性根据JavaScript表达式的计算结果来设置, expression方法在其它浏览器中不起作用，因此在跨浏览器的设计中单独针对InternetExplorer设置时会比较有用。

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

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

3、用<1ink)代替@import 

前面的最佳实f現中提到CSS应该放置在顶端以利于有序加载呈现。

在IE中,页面底部@import和使用<1ink>作用是一样的,因此最好不要使用它。

4、避免使用滤镜 

IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。 这个滤镜的问题在于浏览器加裁图片时它会终止内容的呈现并且冻结浏览器,在每一个元素(不仅仅是图片)它都会运算一次,增加了内存开支,因此它的问题是多方面的。

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