web移动开发最佳实践之js篇

一、js概述

　　js即JavaScript，是被设计用来验证表单、检测浏览器、创建cookies、改进设计以及更多应用的网络脚本语言，它非常容易使用。在web应用中，它是主要的编程语言，主要用途是进行各种逻辑控制、行为展现等。对于js的优化，对于整个应用的提升都是非常显著的。

二、使用字面量（literal notation）来声明对象和数组

　　创建对象和数组的方法有很多，但是使用字面量是最简单最快的。传统的方法是使用内建的构造器声明：

//create an object
var obj = new Object();
obj.debug = false;
obj.lang = "en";

//create an array
var arr = new Array("one", "two", "three");

这种方式在技术上是没问题的，但是使用字面量声明会更快而且代码更少：

//create an object
var obj = {debug: false, lang: "en"};

//create an array
var arr = ["one", "two", "three"];

三、避免使用全局变量和函数

　　即把属性和方法都绑定到一个命名空间对象里，这样不仅可以减少命名冲突，而且可以提升程序性能。

　　当两个区域的代码使用同一个全局变量名作不同用途时，就会产生命名冲突。在JavaScript里，函数外定义的变量或对象都是全局的，随着程序代码和库的增加，命名冲突的概率就越大。如果函数内或其他区域的代码引用了一个特定的全局变量，脚本引擎就必须遍历一遍作用域直到找到这个变量，局部变量则更容易找到。全局变量会在整个脚本的生命周期中存在，但是局部变量会及时被垃圾收集器回收。

例如以下使用全局的声明（不高效）：

//define global variables
var lang = "en";
var debug = true;

//define global function
function setLang (arg) {
    lang = arg;
}

使用如下声明则更好：

var myApp = {
    lang: "en",
    debug: true,
};

myApp.setLang = function (arg) {
    this.lang = arg;
}

四、高效的使用try catch语句

　　你可以使用try-catch语句来拦截程序抛出的错误（在浏览器处理之前），这对于向用户隐藏错误或者为用户定制错误信息是很有用的。

　　当try结构中发生错误时，程序会立即停止并跳到catch结构（会提供错误对象）中。在catch结构中，错误对象会赋给一个新的变量，新的变量在catch结构中一直存在，直到catch语句结束。创建并处理这个新的运行时变量会影响到程序的性能，在关键功能和循环中应避免使用try-catch结构。例如：

var object = ['foo', 'bar'], i;
for (i = 0; i < object.length; i++) {
   try {
      // do something
   } catch (e) {
      // handle exception
   }
}

以上这段代码可能会抛出多个错误，这样写可能会更好：

var object = ['foo', 'bar'], i;
try {
    for (i = 0; i < object.length; i++) {
        // do something
    }
} catch (e) {
    // handle exception
}

五、使用赋值运算来连接字符串

　　字符串连接是很常用的操作，也有很多种方式，比如：

//Using the concatenation (+) operator
str = "h" + "e";
//Using the shorthand assigment (+=) operator
str += "l";
//Using string.concat()
str = str.concat("l", "o");
//Using array.join()
str = ["h", "e", "l", "l", "o"].join("");    

如果你执行的连接操作次数较少，那么以上任何一种方式都可以。但是，当执行大量的连接操作时，就需要优化一下了：

//Slower: Concatenating strings with + operator
str += "x" + "y";

以上连接操作比较慢，它会按以下步骤执行（参见‘编译原理’）：

1. 创建一个临时变量
2. 连接后的字符串xy被赋给这个临时变量
3. 临时变量与str的当前值相加
4. 结果赋给str变量

你可以使用如下的方式避免使用临时变量（减少内存的使用）：

str += "x";
str += "y";

六、优化你的循环

　　当你使用循环的时候，你可以通过减少每次迭代时工作量来优化循环的整体性能。例如：

for (var i = 0; i < arr.length; i++) {
    // length of arr is recalculated every time
}

在以上代码中，arr.length在每次循环中都被计算了一次，这是不必要的，可以声明一个局部变量len来缓存这个值，就会提高运行速度：

for (var i = 0, len = arr.length; i < len; i++) {
    // cache the length of the array
}

或者为了进一步优化，考虑反向的执行循环（如果不关心数组成员的顺序的话）：

for (var i = arr.length; i--;) {
    // in reverse
}

七、避免使用eval()方法

　　eval()方法可以执行一段JavaScript代码，应该避免使用的原因：

• 性能较差，它必须调用编译器来传递其参数，然后执行
• 安全问题，因为它会执行传递给它的任何代码，所以容易受各种注入攻击，特别是在来源未知的时候
• 不利于调试，eval的参数是动态产生的，调试起来不方便，可读性也较差

//Incorrect usage: Using eval to set a value
eval("myValue = myObject." + myKey + ";");

//Correct usage: Using subscript notation to set a value
myValue = myObject[myKey];

另外timeout函数中的setTimeout()和setInterval()也可以接受字符串参数，然后执行，因此表现跟eval()一样。应该避免传递字符串，如下：

// Incorrect usage: Passing a string to setInterval()
var oElement = null;
setInterval('oElement = document.getElementById("pepe");', 0);

// Correct usage: Passing a function to setInterval()
var oElement = null;
setInterval(function() {
    oElement = document.getElementById("pepe");
}, 0);

八、使用事件委托

　　在处理DOM事件的时候，你可以仅对一个父元素绑定一个事件而不是每一个子元素。这种技术即事件委托，它利用事件冒泡来分配事件处理程序，可以提高脚本的性能。比如，一个div元素下面有10个按钮，你可以给div绑定一个监听事件，而不是给10个按钮分别绑定一个事件。传统的声明方式：

<a href="javascript:handleClick();">Click</a>
<button id="btn1" onclick="handleClick();">One</button>
<button id="btn2" onclick="handleClick();">Two</button>

为了提高代码的性能，我们可以加一个div父元素，事件会向上冒泡，直到被处理。事件对象是触发事件的元素，我们可以根据它的id属性来判断是哪一个元素触发了事件：

<div id="btngroup">
  <button id="btn1">One</button>
  <button id="btn2">Two</button>
</div>
document.getElementById("btngroup").addEventListener("click", function (event) {
  switch (event.srcElement.id) {　　//firefox 下为 event.target.id
  case "btn1":
    handleClick();
    break;
  default:
    handleClick();
  }
}, false); // type, listener, useCapture (true=beginning, false=end)

九、尽量减少DOM操作

　　DOM是一个包含了很多信息的复杂的API，因此即使是很小的操作可能会花费较长的时间执行（如果要重绘页面的话）。为了提高程序性能，应尽量减少DOM操作，这里有一些建议：

1.减少DOM的数目

DOM节点的数目会影响与它相关的所有操作，要尽量使DOM树小一些：

• 避免多余的标记和嵌套的表格
• 元素数尽量控制在500个以内（document.getElementsByTagName('*').length）

2.缓存已经访问过的节点

当访问过一个DOM元素后，就应该把它缓存起来，因为你的程序往往要重复访问某个对象的，例如：

for (var i = 0; i < document.images.length; i++) {
    document.images[i].src = "blank.gif";
}

以上例子中，docum.images对象被访问了多次，这并不高效，因为每一次循环中，浏览器都要查找这个元素两次：第一次读取它的长度，第二次改变相应的src值。更好的做法是先把这个对象存储起来：

var imgs = document.images;
for (var i = 0; i < imgs.length; i++) {　　//当然也可以把 imgs.length 提前算出来，这里不是重点
    imgs[i].src = "blank.gif";
}

十、减少页面重绘

　　在控制DOM元素数目的同时，你还可以通过减少修改元素（减少页面的重绘）的方法来提高性能。重绘有两种方式：repaint、reflow。

1.repaint，也叫redraw，即改变了元素的视觉效果，但是不影响它的排版（比如改变背景颜色）

2.reflow，会影响部分或者全部页面的排版，浏览器不仅要计算该元素的位置，还要计算它影响到的周围的元素位置

当你要改变页面布局的时候，reflow就发生了，主要有如下情况：

• 增加或删除DOM节点
• 改变元素的位置
• 改变元素的尺寸（如margin，padding，border，font，width，height等）
• 调整浏览器窗口的尺寸
• 增加或删除css
• 改变内容（如用户输入表单）
• 命中css选择器（如hover）
• 更改了class属性
• 利用脚本更改了DOM
• 检索一个必须被计算的尺寸（如offsetWidth，offsetHeight）
• 设置了一个css属性

这里有一些减少页面重绘的建议：

css的建议：

• 改变class属性时应尽量少的影响到周围的元素节点
• 避免声明多个内联的样式（把多个样式放在一个外部文件里）
• 有动画的元素使用绝对定位，这样不会影响其他元素
• 避免使用table来排版，如果需要使用保存数据，那么要固定排版（table-layout:fixed）

js的建议：

• 缓存计算过的样式
• 对于固定的样式，改变class的名词而不是样式；对于动态的样式，改变cssText属性：
  

  // bad - changing the stle - accessing DOM multiple times
  var myElement = document.getElementById('mydiv');
  myElement.style.borderLeft = '2px';
  myElement.style.borderRight = '3px';
  myElement.style.padding = '5px';
  
  // good - use cssText and modify DOM once
  var myElement = document.getElementById('mydiv');
  myElement.style.cssText = 'border-left: 2px; border-right: 3px; padding: 5px;';

  

• 当你要对一个DOM元素做出很多修改时，可以先进行一些‘预处理’，批量修改后再替换原始的元素
  • 创建一个副本（cloneNode()），对这个副本进行更新，然后替代原来的节点
    

    // slower - multiple reflows
    var list = ['foo', 'bar', 'baz'], elem, contents;
    for (var i = 0; i < list.length; i++) {
        elem = document.createElement('div');
        content = document.createTextNode(list[i]);
        elem.appendChild(content);
        document.body.appendChild(elem); // multiple reflows
    }
    
    // faster - create a copy
    var orig = document.getElementById('container'),
        clone = orig.cloneNode(true), // create a copy
        list = ['foo', 'bar', 'baz'], elem, contents;
    clone.setAttribute('width', '50%');

    
  • 修改一个不可见的元素，可以先让其不可见（display:none），修改完成后，再恢复其可见（display:block），这样就会减少reflow的次数
    

    // slower
    var subElem = document.createElement('div'),
        elem = document.getElementById('animated');
    elem.appendChild(subElem);
    elem.style.width = '320px';
    
    // faster
    var subElem = document.createElement('div'),
        elem = document.getElementById('animated');
    elem.style.display = 'none'; // will not be repainted
    elem.appendChild(subElem);
    elem.style.width = '320px';
    elem.style.display = 'block';

    
  • 创建一个文档片段（使用DocumentFragment()），修改完成后，再把它追加到原始文档中
    

    // slower
    var list = ['foo', 'bar', 'baz'], elem, contents;
    for (var i = 0; i < list.length; i++) {
        elem = document.createElement('div');
        content = document.createTextNode(list[i]);
        elem.appendChild(content);
        document.body.appendChild(elem); // multiple reflows
    }
    
    // faster
    var fragment = document.createDocumentFragment(),
        list = ['foo', 'bar', 'baz'], elem, contents;
    for (var i = 0; i < list.length; i++) {
        elem = document.createElement('div');
        content = document.createTextNode(list[i]);
        fragment.appendChild(content);
    }
    document.body.appendChild(fragment); // one reflow