Web 前端性能优化——把 JavaScript 中的对象存储在变量中

1、为对象属性建立变量快捷方式

将对象属性赋值给变量，在使用对象属性的时候，用变量代替，有很多好处：

1）减少对象的搜索链

2）变量名比属性可读性更好

3）压缩代码

//以前的写法
document.body.addEventListener("click", function(){
    //时间处理程序
});

document.body.className = "user-" + ajaxResult.user[0].user.id;

document.documentElement.setAttribute("data-user-id", ajaxResult.user[0].user.id);


//现在的写法
var doc = document,
      body = doc.body,
      userid = ajaxResult.user[0].user.id;

body.addEventListener("click", function(){
    //时间处理程序
});

body.className = "user-" + userid;

doc.documentElement.setAttribute("data-user-id", userid);

（参考：http://www.gbtags.com/gb/share/1482.htm）

2、尽可能存储 NodeList 和选择器引擎 Collection

通常我们会写出这样的代码：

$(".nav a").css("display", "none");

$(".nav a").css("display", "block");

尽管现在的选择器引擎和浏览器已经在性能上快了不少，但是重复工作始终是会影响性能的。

我们最好是使用变量来存储 DOM 元素：

var $navA = $(".nav a");

$navA.css("display", "none");

$navA.css("display", "block");

（参考：http://www.gbtags.com/gb/share/1478.htm）

3、存储正则表达式

对于正则表达式，通常会有这样的代码

//判断 someValue 是否只包含数字
if(someValue.match(/(\d+)/g)){

}

这种写法的问题是：每次判定都会创建一个正则表达式对象，而需要它们完成的工作确是一样的。

这样的重复工作可以通过将正则表达式存储在一个变量中来避免

var digitsRegex = /(\d+)/g;

myInput.addEventListener("change", function(){
    if(myInput.value.match(digitRegex)){

    }
}):

（参考：http://www.gbtags.com/gb/share/1454.htm）