24小时咨询热线: 18240091316 集团首页

JavaScript性能优化小知识总结(三)

作者: 来源: 时间: 2017-05-09 16:42:42 字体: [大] [中] [小]

前言

一直在学习javascript,也有看过《犀利开发Jquery内核详解与实践》,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解。

鉴于想让自己有一个提升,进不了一个更加广阔的天地,总得找一个属于自己的居所好好生存,所以平时会有意无意的去积累一些使用jQuerry的常用知识,特别是对于性能要求这一块,总是会想是不是有更好的方式来实现。

下面是我总结的一些小技巧,仅供参考。(我先会说一个总标题,然后用一小段话来说明这个意思 再最后用一个demo来简单言明)


避免与null进行比较

由于JavaScript是弱类型的,所以它不会做任何的自动类型检查,所以如果看到与null进行比较的代码,尝试使用以下技术替换

  • 如果值应为一个引用类型,使用instanceof操作符检查其构造函数

  • 如果值应为一个基本类型,作用typeof检查其类型

  • 如果是希望对象包含某个特定的方法名,则使用typeof操作符确保指定名字的方法存在于对象上

避免全局量

全局变量应该全部字母大写,各单词之间用_下划线来连接。尽可能避免全局变量和函数, 尽量减少全局变量的使用,因为在一个页面中包含的所有JavaScript都在同一个域中运行。所以如果你的代码中声明了全局变量或者全局函数的话,后面的代码中载入的脚本文件中的同名变量和函数会覆盖掉(overwrite)你的。

//糟糕的全局变量和全局函数
var current = null;
function init(){
//...
}
function change() {
    //...
}
function verify() {
    //...
}
//解决办法有很多,Christian Heilmann建议的方法是:
//如果变量和函数不需要在“外面”引用,那么就可以使用一个没有名字的方法将他们全都包起来。
(function(){
var current = null;
function init() {
    //...
}
function change() {
    //...
}
function verify() {
    //...
}
})();
//如果变量和函数需要在“外面”引用,需要把你的变量和函数放在一个“命名空间”中
//我们这里用一个function做命名空间而不是一个var,因为在前者中声明function更简单,而且能保护隐私数据
myNameSpace = function() {
  var current = null;

  function init() {
      //...
  }

  function change() {
      //...
  }

  function verify() {
      //...
  }

//所有需要在命名空间外调用的函数和属性都要写在return里面
 return {
    init: init,
    //甚至你可以为函数和属性命名一个别名
    set: change
  };
};

尊重对象的所有权

因为JavaScript可以在任何时候修改任意对象,这样就可以以不可预计的方式覆写默认的行为,所以如果你不负责维护某个对象,它的对象或者它的方法,那么你就不要对它进行修改,具体一点就是说:


  • 不要为实例或原型添加属性

  • 不要为实例或者原型添加方法

  • 不要重定义已经存在的方法

  • 不要重复定义其它团队成员已经实现的方法,永远不要修改不是由你所有的对象,你可以通过以下方式为对象创建新的功能:

  • 创建包含所需功能的新对象,并用它与相关对象进行交互

  • 创建自定义类型,继承需要进行修改的类型,然后可以为自定义类型添加额外功能

循环引用

如果循环引用中包含DOM对象或者ActiveX对象,那么就会发生内存泄露。内存泄露的后果是在浏览器关闭前,即使是刷新页面,这部分内存不会被浏览器释放。

简单的循环引用:

var el = document.getElementById('MyElement');
var func = function () {
     //…
}
el.func = func;
func.element = el;

但是通常不会出现这种情况。通常循环引用发生在为dom元素添加闭包作为expendo的时候。

function init() {
    var el = document.getElementById('MyElement');
    el.onclick = function () {
         //……
    }
 }
 init();

init在执行的时候,当前上下文我们叫做context。这个时候,context引用了el,el引用了function,function引用了context。这时候形成了一个循环引用。

下面2种方法可以解决循环引用:

1) 置空dom对象

function init() {
   var el = document.getElementById('MyElement');
   el.onclick = function () {
     //……
   }
}
init();
//可以替换为:
function init() {
   var el = document.getElementById('MyElement');
   el.onclick = function () {
       //……
   }
   el = null;
}
init();

将el置空,context中不包含对dom对象的引用,从而打断循环应用。

如果我们需要将dom对象返回,可以用如下方法:

function init() {
   var el = document.getElementById('MyElement');
   el.onclick = function () {
         //……
   }
   return el;
}
init();
//可以替换为:
function init() {
    var el = document.getElementById('MyElement');
    el.onclick = function () {
         //……
    }
    try {
          return el;
    } finally {
          el = null;
    }
}
init();

2) 构造新的context

function init() {
     var el = document.getElementById('MyElement');
     el.onclick = function () {
         //……
     }
}
init();
//可以替换为:
function elClickHandler() {
     //……
}
function init() {
     var el = document.getElementById('MyElement');
     el.onclick = elClickHandler;
}
init();

把function抽到新的context中,这样,function的context就不包含对el的引用,从而打断循环引用。

通过javascript创建的dom对象,必须append到页面中

IE下,脚本创建的dom对象,如果没有append到页面中,刷新页面,这部分内存是不会回收的!

function create() {
    var gc = document.getElementById('GC');
    for (var i = 0; i < 5000; i++) {
        var el = document.createElement('div');
        el.innerHTML = "test";
        //下面这句可以注释掉,看看浏览器在任务管理器中,点击按钮然后刷新后的内存变化
        gc.appendChild(el);
    }
} 永远不要忽略代码优化工作,重构是一项从项目开始到结束需要持续的工作,只有不断的优化代码才能让代码的执行效率越来越好。