您的位置：首页 > Web前端 > CSS

CSS Expressions有多可怕

2014-01-13 09:47 253 查看
CSS Expressions 俗称 CSS 表达式，避免使用 CSS Expressions 是前端开发的一个重要指南，为什么要避免使用 CSS Expressions 呢？我们看看雅虎YUI的说明：

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

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

XHTML 和 JS 代码：
<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>


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

CSS Expressions 表达式代码：
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());
}


查看Dome （用 IE6/IE7 查看）

从上面的例子就可以明显的看到 CSS Expressions 的计算的如此的频繁，由此可见它的可怕。

子鼠还提供了一个稍好一点的写法：
body {
font-size:12px;
font-family:Verdana;
line-height:1.9
}
div a {
display:block; border:1px solid #FF3366;
width:expression(function(abc){
abc.style.width = "750px";
test();
}(this));
}


查看Dome （用 IE6/IE7 查看）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航