YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Avoid CSS expressions

前端性能优化:Avoid CSS expressions

今天要介绍的YSlow的前端性能优化规则是 Avoid CSS expressions(避免使用动态 CSS 属性)。那么什么是 CSS expressions 呢?

CSS Expression 简介

CSS Expression,动态 CSS 属性。IE 私有,自 IE 5.0 开始引入(IE8 将不再支持),详细参考MSDN

CSS Expression 用来把 CSS 属性和 Javascript 表达式关联起来,这里的 CSS 属性可以是 CSS 元素固有的属性,也可以是自定义属性。就是说 CSS 属性后面可以是一段 Javascript 表达式,CSS 属性的值等于 Javascript 表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。实例代码如下:

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

CSS Expression 的有点和缺点

优点:
使 CSS 属性动态生成,所以基本 js 能干的它都能干;
使用 CSS 选择符,比 JavaScript 遍历到某个特定元素要方便得多;
缺点:
CSS Expression 会反复执行,有严重的效率问题。它的触发似乎不是通过事件,而是通过 interval 一类的机制;
别的浏览器不支持,IE8 也将不再支持;

关于前端性能的问题主要是CSS Expression 会反复执行,有严重的效率问题。具体的严重的程度YSlow的文档是这么说的:

The problem with expressions is that they are evaluated more frequently than most people expect. Not only are they evaluated when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse over the page. Adding a counter to the CSS expression allows us to keep track of when and how often a CSS expression is evaluated. Moving the mouse around the page can easily generate more than 10,000 evaluations.

CSS Expressions 执行的频率次数超过大家所预料的。当页面刚呈现渲染的时候会执行 CSS Expressions,页面改变大小的时候会执行 CSS Expressions。而且在页面滚动的时候也会触发,甚至连移动鼠标时都会触发。根据YAHOO的工程师的研究,用户通常在页面移动鼠标的操作大约会有10000次之多啊!

避免使用 CSS Expression

所以,为了避免使用 CSS Expressions 带来的巨大的性能损耗(关于性能问题请查看《CSS Expression》),一定要避免使用 CSS Expressions。而且前面也介绍了 CSS Expression 在 IE8 开始就不再支持了,所以 CSS Expression 的兼容问题也是从事前端工作的前端工程师们应该避免的。

当然,如果你要针对的用户就是使用IE8以下的浏览器,一定要使用 CSS Expressions,请记得 CSS Expressions 会带来的巨大的性能损耗。也请参阅《CSS Expression》中提及的 CSS Expressions 的性能优化相关内容。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Avoid CSS expressions

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)