请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

断天涯大虾
社区贡献组   /  发表于:2016-9-8 09:44  /   查看:3699  /  回复:0
本帖最后由 断天涯大虾 于 2016-9-8 09:48 编辑

阅读了博客园发布的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. <font face="微软雅黑" size="3" color="#000000" style="background-color: white;">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('<a href="">test');
  7. buf.push(n);
  8. buf.push('</a>');
  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. }</font>
复制代码

测试结果:

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函数的效率,我们可以用如下的代码测试:

  1. <font face="微软雅黑" size="3" color="#000000" style="background-color: white;">function testNoEval() {
  2. var startTime = new Date();
  3. for(var i=0; i<500000; i++) {
  4. var str = 'test';
  5. }
  6. var endTime = new Date();
  7. document.getElementById('divShowTime1').innerHTML = '耗时1:' +  (endTime - startTime) + 'ms';
  8. }
  9. function testEval() {
  10. var startTime = new Date();
  11. eval("for(var i=0; i<500000; i++) { var str = 'test'; }");
  12. var endTime = new Date();
  13. document.getElementById('divShowTime2').innerHTML = '耗时2:' +  (endTime - startTime) + 'ms';
  14. }</font>
复制代码

测试结果:

IE8FirefoxChrome
1
耗时1:85ms
耗时2:251ms
耗时1:2ms
耗时2:203ms
耗时1:1ms
耗时2:340ms
2
耗时1:82ms
耗时2:251ms
耗时1:2ms
耗时2:204ms
耗时1:2ms
耗时2:344ms
3
耗时1:81ms
耗时2:250ms
耗时1:2ms
耗时2:205ms
耗时1:1ms
耗时2:338ms
4
耗时1:82ms
耗时2:251ms
耗时1:2ms
耗时2:213ms
耗时1:2ms
耗时2:344ms

测试发现,eval的效率明显慢很多,尤其在Firefox和chrome中。 new Fuction的执行原理和eval类似,所以效率也是不高。

3. 拒绝使用with语句。 它会导致当你引用这个变量时去额外的搜索这样的一个命名空间,with里的代码在编译时期是完全未知的。

原因明确,不过使用with语句,代码会非常简洁,我个人还是经常使用这个语句的。

4. 使用for()循环替代for…in循 环。因为for…in循环在开始循环之前需要Script引擎创建一个含有所有可循环属性的 List,需要多检查一次。

原因明确,没有补充。

5. 把try-catch语句放在循环外面,不要放在循环里面,因为异常是很少发生的,放在外面避免每次都要执行 它们。

原因明确,这是我认为使用任何语言都有必要遵守的准则。

6. 甚至圣经里都提到过这个 – 不要全局的。全局变量的生命周期贯穿整个脚本的生命周期,而本地变量的存在范围随着本地命名空间的销毁而消失。当在函数或其它地方引用一个全局变量时,脚 本引擎需要搜索整个全局命名空间。

防止内存泄漏和提高查找解析速度,另外,变量定义在最小使用范围内,代码的可读性好。

7. fullName += 'John'; fullName += 'Holdings';执行速度快于fullName += 'John' + 'Holdings';

还是采用测试代码:

  1. <font face="微软雅黑" size="3" color="#000000" style="background-color: white;">function testString1() {
  2. var startTime = new Date();
  3. for(var i=0; i<500000; i++) {
  4. var fullName = "";
  5. fullName += 'John';
  6. fullName += 'Holdings';
  7. }
  8. var endTime = new Date();
  9. document.getElementById('divShowTime1').innerHTML = '耗时1:' +  (endTime - startTime) + 'ms';
  10. }
  11. function testString2() {
  12. var startTime = new Date();
  13. for(var i=0; i<500000; i++) {
  14. var fullName = "";
  15. fullName += 'John' + 'Holdings';
  16. }
  17. var endTime = new Date();
  18. document.getElementById('divShowTime2').innerHTML = '耗时2:' +  (endTime - startTime) + 'ms';
  19. }</font>
复制代码

测试结果:

IE8FirefoxChrome
1
耗时1:492ms
耗时2:477ms
耗时1:151ms
耗时2:7ms
耗时1:52ms
耗时2:51ms
2
耗时1:532ms
耗时2:456ms
耗时1:150ms
耗时2:7ms
耗时1:50ms
耗时2:51ms
3
耗时1:493ms
耗时2:454ms
耗时1:148ms
耗时2:7ms
耗时1:53ms
耗时2:50ms
4
耗时1:491ms
耗时2:466ms
耗时1:204ms
耗时2:8ms
耗时1:51ms
耗时2:50ms

测试结果出乎意料,在IE8和chrome中,两者的效率差不多,但是在Firefox中,第一种写法反而比第二种慢很多。IE6下测试也是如此,看来这条规则还有待进一步研究。

8. 如果你需要把多个字符串连接起来,最好是把他们做成一个数组,然后调用join()方法实现这个操作。这种方式在生成HTML片段时尤其 有效。

验证还是用测试代码:

  1. <font face="微软雅黑" size="3" color="#000000" style="background-color: white;">function testNoJoin(){
  2. var startTime = new Date();
  3. var testStr = "abcdefghqwertyuiolkjmzxv";
  4. var result = "";
  5. for(var i=0; i<50000; i++) result += testStr;
  6. document.getElementById('divShowTime1').innerHTML = '耗时1:' +  (new Date() - startTime) + 'ms';
  7. }
  8. function testJoin(){
  9. var startTime = new Date();
  10. var testStr = "abcdefghqwertyuiolkjmzxv";
  11. var result = "";
  12. var strs = new Array();
  13. for(var i=0; i<50000; i++) strs[i] = testStr;
  14. result = strs.join("");
  15. document.getElementById('divShowTime2').innerHTML = '耗时2:' +  (new Date() - startTime) + 'ms';
  16. strs = null;
  17. }</font>
复制代码

测试结果:

IE8FirefoxChrome
1
耗时1:19ms
耗时2:25ms
耗时1:25ms
耗时2:25ms
耗时1:15ms
耗时2:9ms
2
耗时1:28ms
耗时2:25ms
耗时1:24ms
耗时2:25ms
耗时1:16ms
耗时2:8ms
3
耗时1:17ms
耗时2:25ms
耗时1:25ms
耗时2:25ms
耗时1:4ms
耗时2:8ms
4
耗时1:16ms
耗时2:25ms
耗时1:28ms
耗时2:27ms
耗时1:4ms
耗时2:11ms

可以看出,这条规则在主流的浏览器中,效率的差别不大。IE6下测试,的确第一种比第二种方式效率差很多,所以这条规则已经过时了。

9. 对于简单的任务,最好使用基本操作方式来实现,而不是使用函数调用实现。例如val1 < val2 ? val1 : val2;执行速度快于Math.min(val1, val2);,类似的,myArr.push(newEle);慢于myArr[myArr.length] = newEle;

这条很好理解,原生态的好。

10. 将函数的引用作为参数传递到setTimeout()和setInterval()里优于将函数名作为字符串参数传递(硬编码)。例如,setTimeout(”someFunc()”, 1000)执行效率慢于setTimeout(someFunc, 1000)

道理类似如上的eval方式。

11. 当进行遍历操作时避免使用DOM操作。通过像getElementsByTagName()这 种方法得到的DOM元素队列都是动态的;有可能在你还没有对它遍历完成时,它已经被改变。这有可能导致死循环。

没有补充。

12. 当你对对象的成员(属性或方法)进行反复操作时,先存储对它们的引用。例如var getTags = document.getElementsByTagName; getTags(’div’);

这条规则的例子,我认为没有表达规则的意思,所以它举得例子不好。并且我按照它的例子测试,并没有发现两者的差异,所以我重新写测试代码如下:

  1. <font face="微软雅黑" size="3" color="#000000" style="background-color: white;">function testMethod1() {
  2. var startTime = new Date();
  3. var tag = document.getElementById('testDiv');
  4. for(var i=0; i<50000; i++) var color = tag.style.backgroundColor;
  5. document.getElementById('divShowTime1').innerHTML = '耗时1:' +  (new Date() - startTime) + 'ms';
  6. }
  7. function testMethod2() {
  8. var startTime = new Date();
  9. for(var i=0; i<50000; i++) var color = document.getElementById('testDiv').style.backgroundColor;
  10. document.getElementById('divShowTime2').innerHTML = '耗时2:' +  (new Date() - startTime) + 'ms';
  11. }</font>
复制代码

测试结果:

IE8FirefoxChrome
1
耗时1:400ms
耗时2:1071ms
耗时1:115ms
耗时2:303ms
耗时1:28ms
耗时2:63ms
2
耗时1:404ms
耗时2:1081ms
耗时1:116ms
耗时2:298ms
耗时1:27ms
耗时2:63ms
3
耗时1:17ms
耗时2:25ms
耗时1:115ms
耗时2:287ms
耗时1:27ms
耗时2:62ms
4
耗时1:399ms
耗时2:1080ms
耗时1:119ms
耗时2:280ms
耗时1:29ms
耗时2:62ms

这个结果也很容易理解,毕竟多调用了一次取DOM函数!

13. 在任何的代码段里,在局部变量范围外存放一个这个局部变量的引用。例如
      function foo(arr) {
      var a = ’something’;

      //变量 ‘a’ 对于下面的一段就是范围外变量,这个变量的引用在很多情况下会有用处。
      for (var i = 0, j = a, loopLen = arr.length; i < loopLen; i++) {
      //do something
      }
      }

没有理解这段的主要意思。

14. for(var i=0; i < someArray.length; i++) {…}的执行效率慢于for (var i=0, loopLen=someArray.length; i<loopLen; i++) {…}。

例子如下:

  1. <font face="微软雅黑" size="3" color="#000000" style="background-color: white;">function testLoop1() {
  2. var someArray = new Array();
  3. for (var i=0; i < 50000; i++) {
  4. someArray.push(i);
  5. }
  6. var startTime = new Date();
  7. for(var j=0; j < someArray.length; j++) var value = someArray[j];
  8. document.getElementById('divShowTime1').innerHTML = '耗时1:' +  (new Date() - startTime) + 'ms';
  9. }
  10. function testLoop2() {
  11. var someArray = new Array();
  12. for (var i=0; i < 50000; i++) {
  13. someArray.push(i);
  14. }
  15. var startTime = new Date();
  16. for(var j=0,loopLen=someArray.length; j<loopLen; j++) var value = someArray[j];
  17. document.getElementById('divShowTime2').innerHTML = '耗时2:' +  (new Date() - startTime) + 'ms';
  18. }</font>
复制代码

这条也很好理解,第一种方式比第二种方式多了取Array长度的步骤。

15. 在HTTP头信息里加入缓存控制过期和最大存活时间标记。

没有补充

16. 优化CSS。要使用<link>方式,而不要使用@import方式。请参考这个优秀的文档http://www.slideshare.net/stubbornella/object-oriented-css

没有补充

17. 使用CSS技术来优化图片资源

减少图片链接个数,减少网络传输压力。

18. 用GZip方式压缩 .js 和 .css 文件。如果你使用的是Apache,在 .htaccess 里设置压缩方式,你的HTML, XML 和 JSON 也同时会被压缩。

AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json

减少传输的压力,增加响应速度。对小型站点,js和css文件不是很大,效果不明显。

19. 使用JavaScript压缩工具。除了使用YUI和JSMin外,你还可以试一试Google Closure http://closure-compiler.appspot.com/home (感谢: James Westgate, 一位读者)

和上面类似,现在有好多JS压缩和混淆的工具。

20. 优化每个页面上的各种资源,把它们拆分到各个子域上,这么它们就能够并行下载。请参考http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

没有补充。

21. 将CSS样式表放在页面的最顶端,这样能方便包括IE在内的浏览器进行解析。

没有补充。

22. 尽量将DOM结构保持的越简单越好。DOM的体积会影响相关的操作效率,像查找, 遍历,DOM改动都有影响。document.getElementsByTagName(’*').length这 个值越小越好。

没有补充。

23. 注意你使用的选择器。例如,如果你想获取一个ul下的直接子元素,使用jQuery(”ul > li”)而不要使用jQuery(”ul li”)

更快的查找速度,遍历的元素少。

24. 当切换元素的可见性时(display),请记住:element.css({display:none})的 速度快于element.hide() 和 element.addClass(’myHiddenClass’)。 除非在一个循环里,我选择element.addClass(’myHiddenClass’), 这样会使代码更简洁 – 不要使用 inline CSS 和 JavaScript。

没有补充。

25. 当你使用完对DOM的引用变量后,要把它置为NULL。

资源回收。

26. 使用AJAX时,GET的执行效率高于POST。所以要尽量使用 GET 方式。只是要注意一点,IE只允许你用GET传送2K的数据。

同样的信息,GET方式传输,使用更少的数据量,所以用GET方式效率高。但是GET方式的安全性不高,传输的数据量受限制。

27. 小心使用脚本动画。没有硬件的支持,动画会执行的很慢。尽量避免使用那些没有实际价值的动画效果。

这是每个使用过脚本动画都深有体会的,不过,我认为HTML5中canvas会广泛地应用,canvas能做出令人赏心悦目的动画效果,值得大家关注。

28. 如果你的background-image对于这个图片的容器太小的话,请避免使 用background-repeat。如果你的背景图片需要来回填充很多次才能充满背景,那么将background-repeat属性设置成background-image 和repeat-x 或 repeat-y来 达到填充背景的效果的做法是不明智的,这种填充方式的效率特别的低。你应该尝试使用一个足够大的图片来做background-image并 且使用background-repeat: no-repeat。

好建议,没有补充

29. 布局时不要使用<table>。 <table>在浏览器完全把它画出来之前需要反复绘制好几次。因为DOM中<table>是很少见的一种之后输出的会影响之前输出的显示效果的元素。对于表格数据来说,你可 以使用table-layout:fixed; 这是一种更有效的现实算法,根据CSS 2.1技术说明,这种写法可以让表格一行一行的输出。

除了上面的原因外,table在样式继承,offset值计算上,在多浏览器中的表现上,都有不少诡异的差异,例如:如果在td中有个元素div,则取div的offsetParent返回是td元素,并不是我们期望的具有position属性的父元素。

30. 尽可能的使用原始JavaScript。限制JavaScript框架的使用。

这一条的准则,要看实际的情况,如果项目非常小,则如果使用框架,框架中大部分的code是没有用的,这样就额外增加了加载时间。如果是大型项目,则使用成熟框架,如Jquery等,不仅能减少开发时间和成本,也减少了后续维护的成本。


前端工具用起来

前端开发渐成热潮,了解超酷的Hover效果之后,还需要了解开发工具:新一代HTML5 / JavaScript UI控件Wijmo,大而全面的前端开发工具包,为您的企业应用提供更加灵活的操作体验,现已全面支持Angular 2。
   
关于葡萄城:全球最大的控件提供商,世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商,为超过75%的全球财富500强企业提供服务。

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部