性能测试YSLOW前端调优23大规则(七)——避免使用CSS表达式

CSS表达式（css expression）又称作为动态属性（Dynamic properties）是早期微软DHTML的产物，用来把CSS属性和JavaScript脚本关联起来。CSS的属性可以是元素固有的属性，也可以是自定义属性，也就是说CSS属性后面可以是一段JavaScript表达式，CSS属性的值等于JavaScript表达式计算的结果。如以下实例是根据浏览器的大小来设置元素的位置。

left: expression(document.body.offsetWidth - 180 "px");

top: expression(document.body.offsetHeight - -80 "px");

CSS从IE5开始得到支持，后因标准、性能、安全性等问题，微软从IE8 beta2标准模式开始，取消对css expression的支持。

微软提供了4个css expression方法：getExpression、recalc、removeExpression、setExpression。有兴趣可以参考MSDN。一般最常用的是直接在css中使用expression。

CSS exprssion技术达到了可以使用表达式或公式来定义CSS属性的目的，MSDN针对CSS表达式给出的优点是：减少页面上的代码，使设计师无需学习JavaScript就能实现一些DHTML的效果。但这种减少代码主要是减少了JavaScript的代码。

CSS表达式本身也存在很多缺陷：

1) 不符合WEB标准

CSS表达式这种在表现中插入行为的JavaScript代码，有悖于Web标准的结构、表现、行为相分离的理念。

2) 效率低

一个CSS表达式会反复执行，因为需要不停的去计算CSS的属性值，甚至执行成百上千次，这会大大消耗计算机硬件资源，极端情况下可能会导致浏览器崩溃。

3) 安全隐患

CSS表达式暴露了一个脚本执行的上下文，可能带来脚本注入的隐患。

为了避免常见的CSS表达式问题，通过可以使用一次性表达式和处理事件。如果CSS表达式必须求值一次，那么可以对这次执行使用JavaScript代码进行重写，这样可以避免元素改变大小、滚动或在页面上移动鼠标时频繁的对CSS表达式进行求值。

表达式的问题在于它们比大多数人期望的更频繁地进行评估。它们不仅在页面呈现和调整大小时进行评估，而且在页面滚动时以及用户将鼠标移到页面上时也进行评估。向CSS表达式添加一个计数器可以让我们跟踪CSS表达式的评估时间和频率。

减少CSS表达式评估次数的一种方法是使用一次性表达式，第一次评估表达式时，它将style属性设置为一个显式值，该值将替换CSS表达式。如果样式属性必须在页面的整个生命周期中动态设置，则使用事件处理程序而不是CSS表达式是一种替代方法。如果您必须使用CSS表达式，请记住它们可能会被数千次评估，并可能会影响页面的性能。

出以以上的原因我们建议在前面开发过程避免使用CSS表达式。

川石信息

www.chuansinfo.com

更多性能知识，QQ交流群：518094865，116209721