解读Yahoo!网站性能优化组定义的34条准则 - 避免CSS表达式

避免CSS表达式

 

CSS表达式是动态设置CSS属性的强大又危险的方法。在IE5.0以后开始支持。例如，使用CSS表达式可以每个小时轮回设置背景颜色：

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

 

如下所示，CSS表达式接受一个JavaScript表达式。此属性就被设置成了JavaScript表达的计算结果。在其他浏览器中表达方法式被忽视的，因此它是在需要建立一个跨浏览器的统一的用户体验时，专门用在Internet Explorer中的。

 

表达式的问题是，它们计算量超出了大多数人的期望。它们不仅在网页渲染，调整大小时需要计算，而且在页面滚动，甚至是用户移动鼠标时都会进行计算。通过在CSS表达式添加计数器，可以让我们跟踪到表达式在什么时候计算，计算多少次。在页面被移动鼠标就能简单地产生超过10,000次计算。 

 

减少CSS表达式计算次数的一种方式是使用一次性的表达式：当表达式第一次计算样式属性后就用一个确定的结果替换表达式。如果在页面生成周期里，样式属性必须动态设置的话，使用事件处理也是一种替换CSS表达式的一种方法。如果必须使用CSS表达式，请记住它可能被计算成千上万次极大地影响页面的性能。