详细整理 js优化针对IE6.0起作用( 四 )


var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
}
var end = new Date().getTime();
alert("用时 "(end - start)" 毫秒");
}

上面代码中,第二种情况是先把全局对象的变量放到函数里面先保存下来,然后直接访问这个变量,而第一种情况是每次都遍历作用域链,直到全局环境,我们看到第二种情况实际上只遍历了一次,而第一种情况却是每次都遍历了,所以我们看看其执行结果:

详细整理 js优化针对IE6.0起作用


从上表中可以看出,其在IE6下差别还是非常明显的,而且这种差别在多级作用域链和多个全局变量的情况下还会表现的非常明显 。
5、避免双重解释
双重解释的情况也是我们经常会碰到的,有的时候我们没怎么考虑到这种情况会影响到效率,双重解释一般在我们使用eval、new Function和setTimeout等情况下会遇到,我们看看下面的例子:
复制代码 代码如下:
div id="demo"/div
input id="but1" type="button" onclick="func1()" value="https://www.rkxy.com.cn/dnjc/效率低"/
input id="but2" type="button" onclick="func2()" value="https://www.rkxy.com.cn/dnjc/效率高"/
var sum, num1 = 1, num2 = 2;
function func1(){
var start = new Date().getTime();
for(var i = 0; i10000; i){
var func = new Function("sum =num1;num1 =num2;num2;");
func();
}
var end = new Date().getTime();
alert("用时 "(end - start)" 毫秒");
}

function func2(){
var start = new Date().getTime();
for(var i = 0; i10000; i){
sum =num1;
num1 =num2;
num2;
}
var end = new Date().getTime();
alert("用时 "(end - start)" 毫秒");
}

第一种情况我们是使用了new Function来进行双重解释,而第二种是避免了双重解释,我们看看在不同浏览器下的表现:
详细整理 js优化针对IE6.0起作用


可以看到,在所有的浏览器中,双重解释都是有很大开销的,所以在实际当中要尽量避免双重解释 。
【详细整理 js优化针对IE6.0起作用】感谢"SeaSunK"对第四点测试报告错误的指正,现在已经修改过来了 。至于最后一点提出的func1每次都初始化,没有可比性,所以我给换了eval,结果发现,在IE6.0下还是有影响,而且在Firefox下,使用eval对效率的影响程度更加厉害,在Firefox下,如果10000次循环,需要十多秒的时间,所以我把循环都变成了1000次 。看代码和报告 。
复制代码 代码如下:
var sum, num1 = 1, num2 = 2;
function func1(){
var start = new Date().getTime();
for(var i = 0; i1000; i){
eval("sum =num1;num1 =num2;num2;");
}
var end = new Date().getTime();
alert("用时 "(end - start)" 毫秒");
}
function func2(){
var start = new Date().getTime();
for(var i = 0; i1000; i){
sum =num1;
num1 =num2;
num2;
}
var end = new Date().getTime();
alert("用时 "(end - start)" 毫秒");
}

您可能感兴趣的文章:一个针对IE7的CSS Hack编写针对IE的JS代码两种编写方法

推荐阅读