找回密码
 立即注册
首页 业界区 业界 对《30个提高Web程序执行效率的好经验》的理解 ...

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

汇干环 2025-5-29 19:36:21
阅读了博客园发布的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. }
复制代码
 
测试结果:
 
 IE8FirefoxChrome
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
您需要登录后才可以回帖 登录 | 立即注册