阅读了博客园发布的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 = "";
- }
复制代码
测试结果:
| 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 |