DOM编程

针对DOM编程，可以从以下几个方面，对代码进行性能优化。

1）innerHTML对比DOM方法

使用innerHTML和原生DOM方法创建、更新DOM元素方面：在旧版浏览器中，innerHTML优势更加明显，在新版本浏览器中优势则不那么明显，在基于webkit内核的浏览器中，DOM方法略胜一筹。
总的来说，更新大段HTML时，推荐使用innerHTML，因为它在绝大部分浏览器中跑的更快，其他时候可以随意选择。

2）节点克隆

在使用DOM方法，大量重复创建DOM元素时，通过克隆已有元素，而不是创建新元素，可以略微提高效率。
也就是说使用element.cloneNode()来替代document.createElement()函数。

3）HTML集合

通过document.getElementsByName()、document.getElementsByClassName()等获取的集合，是一个动态的HTML集合，每次访问都会重新查询（即便只是获取length属性）。所以，将HTML集合保存到数组，将长度保存到局部变量、将当前元素保存到局部变量，可以提高性能。比如：

function collectionNodesLocal() {
   var coll = document.getElementsByTagName('div'),
      len = coll.length,
      name = '',
      el = null;
   for (var count = 0; count < len; count++) {
      el = coll[count];
      name = el.nodeName;
      name = el.nodeType;
      name = el.tagName;
   }
}

4）遍历DOM

因为HTML集合是动态的，所以要注意使用HTML集合的length属性来循环插入新节点，会造成死循环的问题。

5）元素节点

推荐使用能够区分元素节点的API，比如children、childElementCount、nextElementSibling、previousElementSibling等。

6）选择器API

如果需要大量组合查询，推荐使用querySelectorAll()方法。比如，页面中有一些class为'waring'的div元素和另一些class为'notice'的元素，如果要同时得到它们的列表，建议使用querySelectorAll()：
var errs = document.querySelectorAll('div.waring, div.notice');

7）最小化重绘和重排

重绘和重排的代价非常高昂，应该合并多次对DOM和样式的修改，一次处理来提高性能。比如：

var el = document.getElementById('mydiv');
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';

上面这段代码有三个样式属性被修改，应该进行合并一次处理，使用cssText属性实现，如：

var el = document.getElementById('mydiv');
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px';

8）批量修改DOM

当需要对DOM进行一系列操作时，可以通过以下步骤来减少重绘和重排的次数：

1. 使元素脱离文档流；
2. 对其应用多重改变；
3. 把元素带回文档流。

有三种方法，可以使DOM脱离文档：

• 隐藏元素，应用修改，重新显示
• 使用文档片段（document fragment）
• 将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素
  推荐使用文档片段来解决这个问题，代码如下：

var fragment = document.createDocumentFragment();
// 此处为将数据生成元素节点插入某个dom的函数
appendDataToElement(fragment, data);
document.getElementById('mylist').appendChild(fragment);

注意：文档片段的一个便利特性是当你附加一个片段到节点时，实际上被添加的是该片段的子节点，而不是片段本身。

9）事件委托

使用事件委托来减少事件处理器的数量。