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

　　有时我们需要修改一连串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: document.body.style};
var objDOM = document.body;
/* 定义 */


var N = 1e7;
var i;
var t0;
var t1, t2;


t0 = new Date;
for(i=N; i > 0; --i)
    ;
t0 = new Date - t0;


t1 = new Date;
for(i=N; i > 0; --i)
{
    /* 测试1 */
    objDOM.style;
    /* 测试1 */
}
t1 = new Date - t1 - t0;


t2 = new Date;
for(i=N; i > 0; --i)
{
    /* 测试2 */
    objJS.style;
    /* 测试2 */
}
t2 = new Date - t2 - t0;


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

 

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

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

　　IE：10

　　FF: 100

　　Opera: 16

　　Safari: 27

　　Chrome:  20 
　　
　　

　　有此可见，即便是最快也有10倍之多，而在FireFox下更是慢的离谱。因此在大量操作元素样式时，提前读取还是可以提升不少的性能。