对《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()方 法。
我们可以用如下的代码进行测试：
function testInnerHTML(){
var div1 = document.getElementById("testDiv");
var startTime = new Date();
var buf = new Array();
for (var n = 0; n < 5000; n ++){
buf.push('test');
buf.push(n);
buf.push('');
}
div1.innerHTML = buf.join('');
document.getElementById('divShowTime1').innerHTML = '耗时1：' +(new Date() - startTime) + 'ms';
div1.innerHTML = "";
}
function testCreateElement(){
var div1 = document.getElementById("testDiv");
var startTime = new Date();
for (var n = 0; n < 5000; n ++){
var e = document.createElement('a');
e.href = '';
e.innerText = 'test' + n;
div1.appendChild(e);
}
document.getElementById('divShowTime2').innerHTML = '耗时2：' +(new Date() - startTime) + 'ms';
div1.innerHTML = "";
}
测试结果：
IE8FirefoxChrome1耗时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函数的效率，我们可以用如下的代码测试：
function testNoEval() {var startTime = new Date();for(var i=0; i
页:
[1]