CSS Expressions有多可怕

CSS Expressions 俗称 CSS 表达式,避免使用 CSS Expressions 是前端开发的一个重要指南,为什么要避免使用 CSS Expressions 呢?我们看看雅虎YUI的说明:

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

从上面可以看出 CSS Expressions 是如此的可怕。但也许单纯的文字说明还不能使你深入的明白 CSS Expressions 的可怕,那就引用子鼠的例子来实际说明吧:

代码如下:

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>无标题文档</title>
<style>
body {
        font-size:12px;
        font-family:Verdana;
        line-height:1.9
}
div a {
        display:block;
        border:1px solid #FF3366;
        width:expression(this.offsetWidth > 750 ? test() : test());
}
</style>
</head>

<body>
    计算了<input id=”c” />次
    <script type=”text/javascript”>
var k = 0;
function test() {
k++;
document.getElementById(‘c’).value = k;
return;   
}
    </script>
    <div>
        <ul>
            <li><a href=”11111111111111111111″>22222</a></li>
            <li><a href=”11111111111111111111″>22222</a></li>
            <li><a href=”11111111111111111111″>22222</a></li>
            <li><a href=”11111111111111111111″>22222</a></li>   
        </ul>
    </div>
</body>
</html>

JS 代码是用来计算 CSS Expressions 的计算次数。

另外 CSS Expressions 的兼容性很差,所以 CSS Expressions 能不用就不用。

CSS Expressions有多可怕

相关文章:

你感兴趣的文章:

标签云: