DOM优化

由于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/