阅读了博客园发布的IT文章《30个提高Web程序执行效率的好经验》，这30条准则对我们web开发是非常有用的，不过大家可能对其中的一些准则是知其然而不知其所以然。
下面是我对这些准则的理解和分析，有些有关JS性能的准则，我也测试了它们的差异，大家可以下载DEMO页面，如有理解不正确的地方，请大家指正。也非常欢迎大家补充。
测试环境：
OS:Vista;
Processor:3.40GHz;
Memory: 2.00GB;
System type: 32-bit Operating System;
Browser: IE8, Forefox 3.5.7, Chrome4.0.249
1. 尽量避免使用DOM。当需要反复使用DOM时，先把对DOM的引用存到JavaScript本地变量里再使用。使用设置innerHTML的方法来替换document.createElement/appendChild()方 法。
我们可以用如下的代码进行测试：
01 |
function testInnerHTML(){ |
02 |
var div1 = document.getElementById("testDiv"); |
03 |
var startTime = new Date(); |
04 |
var buf = new Array(); |
05 |
for (var n = 0; n < 5000; n ++){ |
06 |
buf.push('<a href="">test'); |
07 |
buf.push(n); |
08 |
buf.push('</a>'); |
09 |
} |
10 |
div1.innerHTML = buf.join(''); |
11 |
document.getElementById('divShowTime1').innerHTML = '耗时1：' + (new Date() - startTime) + 'ms'; |
12 |
div1.innerHTML = ""; |
13 |
} |
14 |
function testCreateElement(){ |
15 |
var div1 = document.getElementById("testDiv"); |
16 |
var startTime = new Date(); |
17 |
for (var n = 0; n < 5000; n ++){ |
18 |
var e = document.createElement('a'); |
19 |
e.href = ''; |
20 |
e.innerText = 'test' + n; |
21 |
div1.appendChild(e); |
22 |
} |
23 |
document.getElementById('divShowTime2').innerHTML = '耗时2：' + (new Date() - startTime) + 'ms'; |
24 |
div1.innerHTML = ""; |
25 |
} |
测试结果：
| IE8 | Firefox | Chrome | |
| 1 |
耗时1：134ms |
耗时1：570ms |
耗时1：61ms |
| 2 |
耗时1：131ms |
耗时1：474ms |
耗时1：58ms |
| 3 |
耗时1：131ms |
耗时1：673ms |
耗时1：57ms |
| 4 |
耗时1：132ms |
耗时1：540ms |
耗时1：55ms |
测试结果显示使用innerHTML对比document.createElement/appendChild()方法，在IE8中，效率的提高是非常明显的，但是在Firefox和Chrome中，差别不大。
