写出高性能javascript----三个习惯 -

talentluke

浏览: 600854 次
性别:
来自: 深圳

最近访客更多访客>>

wbsh583

omeweb

violinacl

huangdj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

写出高性能javascript----三个习惯

做了这么久的前端工程师，总被朋友问到怎么写出高性能的javascript，那么我今天就来简单总结下，其实js本身是没有什么性能问题的，所谓的内存泄露，也主要针对于IE6，IE7，而IE7的内存泄露问题也并不严重，这里不讨论浏览器造成的内存泄露问题，我们只讨论，养成什么样的书写习惯能够写出，高效率高性能的js。

在这里我总结了三个书写js的习惯，然后分别针对执行效率，内存问题，安全等各个方面综合分析要养成这三个习惯的原因。

1.尽量使用局部变量：

　　局部变量的创建和访问都是特别廉价快捷的，而使用全局变量的话，js对全局变量的调用实际上是对 GLOBAL对象的查找引用，性能低下。而局部变量则是直接创建于当前作用域，不需要有查找引用的过程。不单单是当前作用域，包括闭包里的局部变量访问，都是很快的。不过，这个过程带来的优化是需要庞大的js程序长时间的运行才能体现出的。

下面通过细化js解析过程来理解下：

一个变量具体是局部变量还是全局变量，局部变量的话是在哪层闭包里，是第几个变量，在编译的时候就已经确定了，重复的var声明并不会影响js的执行效率，js执行时,如果是局部变量则会直接在向内存地址里取用，而全局变量则是对象访问，显然局部变量在效率上要优化的多。

　　但是，不是任何时候局部变量都是最优化的。

　　例如，当一个变量是一个表达式或者一个查找dom节点的过程等时，变量的取用中就带有了查找和计算过程，这样如果计算次数比较多，用全局变量则可以一次性的固化结果，而使用局部变量反而需要多次计算查找，而影响了效率了。

　　总结：

　　当然，以上的数据仅仅只对js代码的执行效率而言，在具体应用中，我仍然推荐大家尽量使用局部变量。因为，js的一个重要的编程理念就是不要污染全局对象，全局对象可能被不同的模块（甚至页面上的广告）访问，在上面存放数据、函数会有不可预期的后果。所以，我们要灵活使用全局对象和局部变量。

2.及时释放回调函数，解除事件绑定。

　　上面一个习惯，主要针对于执行效率问题，而这个习惯则是针对内存泄露的问题了。除了古老浏览器本身的bug造成的内存泄露外，错误的书写js代码也会引起内存泄露的问题。

　　首先，有如下代码解释下这句话的意思：

1 img.onload = function () {
2     img.onload = img.onerror = null;
3 }
4 $(...).on('keyup', function(e){
5     $().off(e);
6 })

　　那这么做有什么好处呢，那么我们看下下面的情况：

　　比如一个div的keyup和click事件。如果keyup事件引用了div，div又引用着click，那么keyup就会引用 click，如果click引用另一个div的keyup，就会导致内存泄露，解绑keyup或者click任何一者都会消除内存泄露。

　　而如果不及时释放回调函数，亦有可能发生以上的问题。

　　上面那段话是不是逻辑很复杂呢^ ^，总之养成这个习惯是不会错的，那就是及时释放回调函数，解除事件绑定。

　3.及时清除引用。

这个习惯也是针对于内存泄露问题，我们先看看以下代码：

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <title>Memory leak demo</title>
 5 </head>
 6 <body>
 7     <a href="javascript:;">Click me</a>
 8 </body>
 9 <script src="jquery-1.8.0.js"></script><script>
10     $('a').click(function callback(e) {
11         $(this).remove();
12         $('<a href="javascript:;">Click me</a>').appendTo(document.body).click(function(e2){
13             e2.leak = e;
14             callback.call(this, e2);
15         });
16         
17         var current = e, n = 0;
18         while(current.leak){
19             current = current.leak;
20             n++;
21         }
22         console.log('leaked: ' + n);
23         //e = null;
24     });
25 </script>
26 </html>

　　这是段代码在不停的替换页面中的a标签，并且为新的a标签绑定clcik事件，在事件的回调函数中，引用了上一个事件的e，导致了原本的a标签即使已经被remove也无法被释放，仍然保存在内存里。随着用户click次数的增多，内存泄露问题也会越来越严重。

　　所以这个时候，我们就要记得及时清除引用，这段代码的内存泄露问题是由于事件对象e引起的，在23行，去掉注释后，e = null 释放了内层函数对外层函数的变量e指向的对象的引用，使得e以及它引用的dom节点能被释放，内存泄露问题也就得以解决了。

当然，想写出高性能的js，还有很多可以仔细研究的地方，而上面的三个习惯是可以在日常的编码中养成的，也没有什么替换成本。还有很多良好的习惯，比如减少函数引用，尽量少使用闭包等。

分享到：

对spring的aop理解 | 深度理解原型链

2013-04-09 15:17
浏览 1009
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

写出高性能javascript----三个习惯

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

写出高性能javascript----三个习惯

评论

发表评论

相关推荐

最近访客更多访客>>