位置：首页>> 网络编程>> 网页设计>> expression为什么性能差？

expression为什么性能差？

作者：zishu　来源：zishu博客　发布时间：2009-05-28 19:12:00　

标签：css,expression,性能

以下是YUI中不建议用的一些说明：

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

一个减少CSS表达式计算次数的方法就是使用一次性的表达式，它在第一次运行时将结果赋给指定的样式属性，并用这个属性来代替CSS表达式。如果样式属性必须在页面周期内动态地改变，使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。

我写了一个例子用来看为什么性能差（在IE6中运行）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>aspxhome.com</title><style>body{ font-size:12px; font-family:Verdana; line-height:1.9}a{ display:block; border:1px solid #FF3366;width:expression(this.offsetWidth > 750 ? test() : test());} </style></head><body>计算了<input id="c" />次<script>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>

一种相对比较好的写法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.aspxhome.com</title><style>body{ font-size:12px; font-family:Verdana; line-height:1.9}a{ display:block; border:1px solid #FF3366; width:expression(function(abc){ abc.style.width = "750px"; test(); }(this));}</style></head><body>计算了<input id="c" />次<script>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>

投稿

expression为什么性能差？

猜你喜欢