网页性能优化漫谈(四)

[laizimo]

前言

这篇文章是翻译了yslow 35rules的一部分，因为本人重来没有做过这方面的优化，因此，来自原文的翻译可以更加清晰的来解释这个问题。

正文

1. CSS expressions
   CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically. They were supported in Internet Explorer starting with version 5, but were deprecated starting with IE8. As an example, the background color could be set to alternate every hour using CSS expressions:

   使用css表达式去设置css动态属性是一种有力的(却又危险的)行为。它们在IE5浏览器开始被支持，但在IE8开始被启用。举个例子：背景颜色的值可以通过css表达式来计算每小时的值，将其赋值给背景颜色：

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

   As shown here, the expression method accepts a JavaScript expression. The CSS property is set to the result of evaluating the JavaScript expression. The expression method is ignored by other browsers, so it is useful for setting properties in Internet Explorer needed to create a consistent experience across browsers.

   这里展示的例子中，表达式可以接受一个javascript表达式。css属性通过计算javascript表达式来进行设置。表达式被其他浏览器忽略，因此在IE浏览器中设置属性以在浏览器之间创建一致的体验是非常有用的。

   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表达式增加一个计算器，将会导致无论何时何种方式css表达式都会被重新计算。移动鼠标划过页面的行为可以轻松地使得表达式被重新计算超过10000次。

   One way to reduce the number of times your CSS expression is evaluated is to use one-time expressions, where the first time the expression is evaluated it sets the style property to an explicit value, which replaces the CSS expression. If the style property must be set dynamically throughout the life of the page, using event handlers instead of CSS expressions is an alternative approach. If you must use CSS expressions, remember that they may be evaluated thousands of times and could affect the performance of your page.

   减少你的css表达式重复计算次数的方式是去使用一次表达式，那么在第一次的时候，表达式将会被计算，作为一个普通的css表达式的替换的值，来设置css样式属性。如果这个样式属性一定要在整个页面周期中被动态调整的话，可以使用事件处理来代替css表达式的使用。如果你一定要使用css表达式的话，请记住它们有可能被重新计算成千上万次，并且可能影响你的页面性能。

总结

css表达式这个东西，其实说到底js可以来实现的，还是js实现起来轻松方便