思洋互动网站建设学前班

4、减少作用域链上的查找次数

我们知道，js代码在执行的时候，如果需要访问一个变量或者一个函数的时候，它需要遍历当前执行环境的作用域链，而遍历是从这个作用域链的前端一级一级的向后遍历，直到全局执行环境，所以这里往往会出现一个情况，那就是如果我们需要经常访问全局环境的变量对象的时候，我们每次都必须在当前作用域链上一级一级的遍历，这显然是比较耗时的，我们看下面的例子：
广州网站建设,网站建设,广州网页设计,广州网站设计

1. <div id="demo"></div>   
2. <input id="but1" type="button" onclick="func1()" value="效率低"/>   
3. <input id="but2" type="button" onclick="func2()" value="效率高"/>   
4.  

1. function func1(){   
2.     var start = new Date().getTime();   
3.     for(var i = 0; i < 10000; i++){   
4.         var but1 = document.getElementById("but1");   
5.         var but2 = document.getElementById("but2");   
6.         var inputs = document.getElementsByTagName("input");   
7.         var divs = document.getElementsByTagName("div");   
8.         var but1 = document.getElementById("but1");   
9.         var but2 = document.getElementById("but2");   
10.         var inputs = document.getElementsByTagName("input");   
11.         var divs = document.getElementsByTagName("div");   
12.         var but1 = document.getElementById("but1");   
13.         var but2 = document.getElementById("but2");   
14.         var inputs = document.getElementsByTagName("input");   
15.         var divs = document.getElementsByTagName("div");   
16.         var but1 = document.getElementById("but1");   
17.         var but2 = document.getElementById("but2");   
18.         var inputs = document.getElementsByTagName("input");   
19.         var divs = document.getElementsByTagName("div");   
20.         var but1 = document.getElementById("but1");   
21.         var but2 = document.getElementById("but2");   
22.         var inputs = document.getElementsByTagName("input");   
23.         var divs = document.getElementsByTagName("div");   
24.         var but1 = document.getElementById("but1");   
25.         var but2 = document.getElementById("but2");   
26.         var inputs = document.getElementsByTagName("input");   
27.         var divs = document.getElementsByTagName("div");   
28.     }   
29.     var end = new Date().getTime();   
30.     alert("用时 " + (end - start) + " 毫秒");   
31. }   
32. function func2(){   
33.     var start = new Date().getTime();   
34.     var doc = document;   
35.     for(var i = 0; i < 10000; i++){   
36.         var but1 = doc.getElementById("but1");   
37.         var but2 = doc.getElementById("but2");   
38.         var inputs = doc.getElementsByTagName("input");   
39.         var divs = doc.getElementsByTagName("div");   
40.         var but1 = doc.getElementById("but1");   
41.         var but2 = doc.getElementById("but2");   
42.         var inputs = doc.getElementsByTagName("input");   
43.         var divs = doc.getElementsByTagName("div");   
44.         var but1 = doc.getElementById("but1");   
45.         var but2 = doc.getElementById("but2");   
46.         var inputs = doc.getElementsByTagName("input");   
47.         var divs = doc.getElementsByTagName("div");   
48.         var but1 = doc.getElementById("but1");   
49.         var but2 = doc.getElementById("but2");   
50.         var inputs = doc.getElementsByTagName("input");   
51.         var divs = doc.getElementsByTagName("div");   
52.         var but1 = doc.getElementById("but1");   
53.         var but2 = doc.getElementById("but2");   
54.         var inputs = doc.getElementsByTagName("input");   
55.         var divs = doc.getElementsByTagName("div");   
56.         var but1 = doc.getElementById("but1");   
57.         var but2 = doc.getElementById("but2");   
58.         var inputs = doc.getElementsByTagName("input");   
59.         var divs = doc.getElementsByTagName("div");   
60.     }   
61.     var end = new Date().getTime();   
62.     alert("用时 " + (end - start) + " 毫秒");   
63. } 

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

从上表中可以看出，其在IE6下差别还是非常明显的，而且这种差别在多级作用域链和多个全局变量的情况下还会表现的非常明显。