对《30个提高Web程序执行效率的好经验》的理解

阅读了博客园发布的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()方 法。
我们可以用如下的代码进行测试：
 

1. function testInnerHTML(){
2. var div1 = document.getElementById("testDiv");
3. var startTime = new Date();
4. var buf = new Array();
5. for (var n = 0; n < 5000; n ++){
6. buf.push('test');
7. buf.push(n);
8. buf.push('');
9. }
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 耗时2：857ms	耗时1：570ms            耗时2：658ms	耗时1：61ms            耗时2：47ms
2	耗时1：131ms            耗时2：846ms	耗时1：474ms            耗时2：610ms	耗时1：58ms            耗时2：48ms
3	耗时1：131ms            耗时2：927ms	耗时1：673ms            耗时2：674ms	耗时1：57ms            耗时2：49ms
4	耗时1：132ms            耗时2：846ms	耗时1：540ms            耗时2：686ms	耗时1：55ms            耗时2：46ms

测试结果显示使用innerHTML对比document.createElement/appendChild()方法，在IE8中，效率的提高是非常明显的，但是在Firefox和Chrome中，差别不大。
2. eval()有问题，new Fuction()构造函数也是，尽量避免使用它们。
eval方式比直接调用方式多了一步解析的过程，所以尽量避免使用它，如果必须用它，则最好是把调用的代码包装到函数中，然后eval这个函数，这样减少了解析的时间。eval函数的效率，我们可以用如下的代码测试：
 
[code]function testNoEval() {var startTime = new Date();for(var i=0; i