编写高性能JavaScript
一．执行效率
1. DOM
1.1 使用DocumentFragment优化多次append
说明：添加多个dom元素时，先将元素append到DocumentFragment中，最后统一将DocumentFragment添加到页面。
该做法可以减少页面渲染dom元素的次数。经IE和Fx下测试，在append1000个元素时，效率能提高10%-30%，Fx下提升较为明显。

使用前：
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    document.body.appendChild(el);
}

使用后：
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);

1.2 通过模板元素clone，替代createElement
说明：通过一个模板dom对象cloneNode，效率比直接创建element高。
性能提高不明显，约为10%左右。在低于100个元素create和append操作时，没有优势。

使用前：
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);    

使用后：
var frag = document.createDocumentFragment();
var pEl = document.getElementsByTagName('p')[0];
for (var i = 0; i < 1000; i++) {
    var el = pEl.cloneNode(false);
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);

1.3 使用一次innerHTML赋值代替构建dom元素
说明：根据数据构建列表样式的时候，使用设置列表容器innerHTML的方式，比构建dom元素并append到页面中的方式，效率有数量级上的提高。

使用前：
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);

使用后：
var html = [];
for (var i = 0; i < 1000; i++) {
    html.push('<p>' + i + '</p>');
}
document.body.innerHTML = html.join('');

1.4 使用firstChild和nextSibling代替childNodes遍历dom元素
说明：约能获得30%-50%的性能提高。逆向遍历时使用lastChild和previousSibling。

使用前：
var nodes = element.childNodes;
for (var i = 0, l = nodes.length; i < l; i++) {
var node = nodes[i];
……
}

使用后：
var node = element.firstChild;
while (node) {
……
node = node.nextSibling;
}

2. 字符串

2.1 使用Array做为StringBuffer，代替字符串拼接的操作
说明：IE在对字符串拼接的时候，会创建临时的String对象；经测试，在IE下，当拼接的字符串越来越大时，运行效率会急剧下降。Fx和Opera都 对字符串拼接操作进行了优化；经测试，在Fx下，使用Array的join方式执行时间约为直接字符串拼接的1.4倍。

使用前：
var now = new Date();
var str = '';
for (var i = 0; i < 10000; i++) {
    str += '123456789123456789';
}
alert(new Date() - now);

使用后：
var now = new Date();
var strBuffer = [];
for (var i = 0; i < 10000; i++) {
    strBuffer.push('123456789123456789');
}
var str = strBuffer.join('');
alert(new Date() - now);

3. 循环语句

3.1 将循环控制量保存到局部变量
说明：对数组和列表对象的遍历时，提前将length保存到局部变量中，避免在循环的每一步重复取值。

使用前：
var list = document.getElementsByTagName('p');
for (var i = 0; i < list.length; i++) {
    ……
}

使用后：
var list = document.getElementsByTagName('p');
for (var i = 0, l = list.length; i < l; i++) {
    ……
}

3.2 顺序无关的遍历时，用while替代for
说明：该方法可以减少局部变量的使用。比起效率优化，更能直接看到的是字符数量的优化。该做法有程序员强迫症的嫌疑。

使用前：
var arr = [1,2,3,4,5,6,7];
var sum = 0;
for (var i = 0, l = arr.length; i < l; i++) {
    sum += arr[i];
}    

使用后：
var arr = [1,2,3,4,5,6,7];
var sum = 0, l = arr.length;
while (l--) {
    sum += arr[l];
}

4. 条件分支

4.1 将条件分支，按可能性顺序从高到低排列
说明：可以减少解释器对条件的探测次数。

4.2 在同一条件子的多（>2）条件分支时，使用switch优于if
说明：switch分支选择的效率高于if，在IE下尤为明显。4分支的测试，IE下switch的执行时间约为if的一半。

4.3 使用三目运算符替代条件分支
使用前：
if (a > b) {
num = a;
} else {
num = b;
}

使用后：
num = a > b ? a : b;


5. 定时器

5.1 需要不断执行的时候，优先考虑使用setInterval
说明：setTimeout每一次都会初始化一个定时器。setInterval只会在开始的时候初始化一个定时器

使用前：
var timeoutTimes = 0;
f