缓存DOM的style属性能快多少？

2011/3/14 1:54:58ChineseComment(0)Browse(2210)

有时我们需要修改一连串style属性值，为了使代码简单点，先提前取出元素的style值，例如：

var sty = elem.style;

sty.left = "XXX";
sty.top = "XXX";
sty.width = "XXX";
sty.height = "XXX";

也许你考虑的仅仅是为了简单点，并不认为运行速度能快多少。如果碰到只修改2个属性的话，或许你还不一定会这样做。

过去我也是这样认为，访问elem.style无非就是读取obj[key]的时间，快的可以忽略不计。事实上，直觉往往是错误的，绝知此事还是要躬行一下。

这里写了一个最简单的测试，就是比较访问elem.style的时间和obj.style的时间 :

/* 定义 */
var objJS = {style: {}};
var objDOM = document.body;


var t0;
var t1, t2;

t0 = +new Date();
for(var i=0; i<1e6; i++)
	;
t0 = +new Date() - t0;

t1 = +new Date();
for(var i=0; i<1e6; i++)
{
	/* 测试1 */
	objDOM.style;
	/* 测试1 */
}
t1 = +new Date() - t1 - t0;


t2 = +new Date();
for(var i=0; i<1e6; i++)
{
	/* 测试2 */
	objJS.style;
	/* 测试2 */
}
t2 = +new Date() - t2 - t0;

alert("t1 : t2 = " + t1 / t2 + " : 1");

在IE上脚本运行时间长了会报超时，所以可以设当修改1e6这个值。因为结果是个比率，所以不影响。

究竟DOM.style比obj.style慢了几倍呢？下面是一些浏览器的平均测试结果：

IE：10

FF: 180

Opera: 16