由于Dom方法和ECMAScript方法就好比两个独立的岛屿，两者之间如果过多交互会带来一些性能消耗。我们应当尽量减少两者的交叉使用。
例如JS操作Dom
1、chrome等webkit浏览器下：Dom方法比innerHTML方法性能要好。
2、firefox、IE、opera等浏览器反而是innerHTML比Dom方法性能好。
DOM优化方法：
减少dom操作
1、采用节点克隆方法
- cloneNode
2、访问元素集合
- 尽量采用局部变量（把常用到的值存到一个局部变量里面）
3、元素节点
- 尽量用只获取元素的节点方法（例如childNodes -> 元素节点、文本节点； children -> 元素节点； firstChild、firstElementChild等等）
4、选择器API:
- 利用querySelector、querySelectotAll
Dom与浏览器，从浏览器的方向着手优化：
关键点：
1、重排：改变页面的内容
2、重绘：浏览器显示内容
尽量减少以上两点，可以这样做：
1、js的执行顺序：添加dom节点的时候，尽量在appendChild前添加操作。
2、合并dom操作。例如不用element.style...转而使用cssText
3、缓存布局信息。例如把js控制到的样式在改变前先存在一个变量里，以免没次调用到的时候都重新获取一次。
4、文档碎片：
- createDocuemtFragment() 在一个循环创建html结构的js中，先等创建好dom之后再一次性插入dom中。
DOM与事件委托
DOM与前端模板（更好的分离逻辑和视图，MVC架构的基础。）
参见：http://www.baiduux.com/blog/2011/07/11/introduction-of-template/