当一个页面由expression来定义的CSS的元素数量较多, 则会严重降低当前页面的性能. 比如页面的翻滚, 并影响其它正常JS脚本的执行性能,和事件的执行性能.


expression样式定义的JS代码, 包括每一次鼠标移动(比如文字区与空白区移动),点击, 都有可能会重新触发执行.

当一个页面依赖expression CSS的元素很少时,影响也会相应的尽可能降到最低水平.


下面为转文:


　　在很久很久以前，微软ie开发团队为ie增加了一个强大的属性expression，它够让我们在CSS里编写javascript代码。

　　expression的出现是我们的福音，因为ie前期的开发并不重视W3C标准，早期版本不支持许多特性，比如CSS2里面的min-width、:hover伪类等，利用expression我们可以披着javascript的马甲写着“表现代码”。

　　在经过许多年以后，expression被曝露存在有效率问题，通过expression运行的代码会被不断执行，从而导致CPU急剧上升，浏览器假死，系统崩溃，自动重启，主板爆电容。。。 -_-!


值得高兴的是，这个问题很快让老九童鞋解决，他通过重置绑定expression的样式来清除事件。


[code]<style type="text/css">  
#div1{  
    float:left;max-width:200px;height:1000px;background:green;  
    top:expression(test());  
}  
</style>  
<script type="text/javascript">  
    var i = 1;  
    function test(){  
       document.getElementById('div1').style.background='red';  
       document.getElementById('div1').style.marginTop='100px';  
       document.getElementById('div1').style.top='auto';  //此行为重置绑定TOP清除expression的样式
       document.getElementById('div1').innerHTML = "危险，看着状态栏，试一下单击，双击，移动鼠标，滚动中轴!test函数被执行了"+(i++)+"次";  
 
    }  
</script>  
<div id="div1">危险，看着状态栏，试一下单击，双击，移动鼠标，滚动中轴!</div>  [/code]

不清除样式演示: http://tommyfan.com/blog/demos/expression/test_1.html
带清除样式演示: http://tommyfan.com/blog/demos/expression/test_2.html