zoukankan      html  css  js  c++  java
  • 写出高性能javascript(1)三个习惯

      做了这么久的前端工程师,总被朋友问到怎么写出高性能的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,还有很多可以仔细研究的地方,而上面的三个习惯是可以在日常的编码中养成的,也没有什么替换成本。还有很多良好的习惯,比如减少函数引用,尽量少使用闭包,等,想做到这些方式可能需要较高的替换成本,如果有机会以后再与大家分享吧~。

  • 相关阅读:
    PAT L3-021 神坛
    2019.07.08【NOIP提高组】模拟 A 组 总结
    2019.07.06【NOIP提高组】模拟 A 组 总结
    2019.07.05【NOIP提高组】模拟 A 组 总结
    jzoj 1287. 躲雨
    jzoj 4614. 【NOIP2016模拟7.12】字符串
    jzoj 3317. 【BOI2013】管道
    2019.07.04【NOIP提高组】模拟 A 组
    jzoj 3316. 【BOI2013】非回文数字
    jzoj 4616. 【NOI2016模拟7.12】二进制的世界
  • 原文地址:https://www.cnblogs.com/maorongmaomao/p/2665094.html
Copyright © 2011-2022 走看看