之前听说for 的循环在写法不一样, 效率不一样, 照做就是了, 今天简单测试了一下, 时候还挺可观的。
工具:
ie7.0.5730.11
dynaTrace AJAX Edition Version: 1.5.0.247
测试代码
代码
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="content-type" content="text/html; charset=utf-8">
6
7 <title>test</title>
8
9 </head>
10 <body>
11
12 <div id="2"> <div id="3"> <div id="4"> <div id="5"> <div id="6"> <div id="7"> <div id="8"> <div id="9"> <div id="10"> <div id="11"> <div id="12"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
13 </body>
14 <script type="text/javascript" charset="utf-8">
15 for (var i = 0, len=10000; i < len; i++) {
16 var a = 100;
17 }
18 </script>
19 <script type="text/javascript" charset="utf-8">
20 for (var i = 10000 - 1; i >= 0; i--) {
21 var a = 100;
22 }
23 </script>
24 <script type="text/javascript" charset="utf-8">
25 var items = document.getElementsByTagName("div");
26 for (var i = 0; i < items.length; i++) {
27 var item = items[i];
28 }
29 </script>
30 <script type="text/javascript" charset="utf-8">
31 var items = document.getElementsByTagName("div");
32 for (var i = 0 , len=items.length; i < len; i++) {
33 var item = items[i];
34 }
35 </script>
36
37 </html>
38
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="content-type" content="text/html; charset=utf-8">
6
7 <title>test</title>
8
9 </head>
10 <body>
11
12 <div id="2"> <div id="3"> <div id="4"> <div id="5"> <div id="6"> <div id="7"> <div id="8"> <div id="9"> <div id="10"> <div id="11"> <div id="12"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
13 </body>
14 <script type="text/javascript" charset="utf-8">
15 for (var i = 0, len=10000; i < len; i++) {
16 var a = 100;
17 }
18 </script>
19 <script type="text/javascript" charset="utf-8">
20 for (var i = 10000 - 1; i >= 0; i--) {
21 var a = 100;
22 }
23 </script>
24 <script type="text/javascript" charset="utf-8">
25 var items = document.getElementsByTagName("div");
26 for (var i = 0; i < items.length; i++) {
27 var item = items[i];
28 }
29 </script>
30 <script type="text/javascript" charset="utf-8">
31 var items = document.getElementsByTagName("div");
32 for (var i = 0 , len=items.length; i < len; i++) {
33 var item = items[i];
34 }
35 </script>
36
37 </html>
38
测试结果
用例一: 9.08 ms
用例二: 7.15 ms
用例三: 0.53
用例四: 0.30
用例二的比较值是一个常数, 对于用例一的变量来说会快一些
用例三比用例四多的是多取了几个items.length
用例三的时间图:
用例四时间图: