JavaScript 高性能优化

如何减少页面的reflow

1. 在文档外创建并更新一个文档片段，然后把文档片段放入页面。（推荐）

   
   var frag = document.createDocumentFragment();
   
   for (...) {
       frag.appendChild(document.createElement('div'));
   }
   
   document.getElementById('container').appendChild(frag);
   
   

2. 临时移除更新节点，操作完成后再恢复它。

   
   var container = document.getElementById('container');
   
   container.style.display = 'none';
   
   for (...) {
       container.appendChild(document.createElement('div'));
   }
   
   container.style.display = 'normal';
   
   

3. 创建更新节点的副本，在副本上进行相关的操作，最后用副本覆盖原节点。

   
   var old = document.getElementById('container');
   
   var clone = old.CloneNode(true);
   
   for (...) {
       clone.appendChild(...);
   }
   
   old.parentNode.replaceNode(clone, old);
   
   

For循环优化

1. 缓存循环长度

   
   var arr = [1, 2, 3, 4];
   
   // len 缓存数组长度
   for (var i = 0, len = arr.length; i < len; i++) {
       ...
   }
   
   

2. 倒序循环

   
   var arr = [1, 2, 3, 4];
   
   // 使用倒序遍历
   for (var i = arr.length; i--;) {
       ...
   }
   
   

3. 达夫设备

   
   var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
   
   // 假设达夫设备每次循环调用8次程序
   var len = arr.length,
   
       // 等价于 i % 8，这里是为了体现更好的性能，项目中严禁写这样代码
       i = len - ((len >> 3) << 3);
   
   while (i) {
       process(arr[i--]);
   }
   
   // 等价于 i / 8，这里是为了体现更好的性能，项目中严禁写这样代码
   i = Math.floor(len >> 3);
   
   while (i) {
       process(arr[i--]);
       process(arr[i--]);
       process(arr[i--]);
       process(arr[i--]);
       process(arr[i--]);
       process(arr[i--]);
       process(arr[i--]);
       process(arr[i--]);
   }
   
   

避免二次评估

var num1 = 12,
    num2 = 23,
    sum = 0;

以下这些用法不应该出现：一般 eval 和 fucntion 很少会用，后面

1. eval

   sum = eval('num1 + num2');
   
   

2. function

   sum = new Function('num1', 'num2', 'return num1 + num2');
   
   

3. setTimeout

   setTimeout('sum = num1 + num2', 100);
   
   

4. setInterval

   setInterval('sum = num1 + num2', 100);
   
   

字符串拼接

1. IE7-

   var arr = ['John', 'Neal', 'Somit', 'Tom'];
   
   var str = [];
   for (var i = arr.length; i--;) {
       str.push('<div id="'+ i +'">'+ arr[i] +'</div>');
   }
   str = str.join('');
   
   // do something else
   
   

2. IE8+ & 其他浏览器

   var arr = ['John', 'Neal', 'Somit', 'Tom'];
   
   var str = '';
   for (var i = arr.length; i--;) {
       str = str + '<div id="'+ i +'">'+ arr[i] +'</div>';
   }
   
   // do someting else