高效http页面优化法则一【JS对DOM的操作】

很多人都认为JS的效率太慢了，都不愿意用js来实现相对困难一点的程序逻辑。在这里我要说的是其实js的效率并不慢，慢的是DOM，如果操作好DOM，你的js效率将提高接近千倍（这并不是什么夸张的数字）。

1.批量增加Dom

尽量使用修改innerHTML的方式而不是用appendChild的方式;因为使用innerHTML开销更小,速度更快,同时也更加内存安全.

有一点需要注意的是,用innerHTML方式添加时,一定不要在循环中使用innerHTML+=的方式添加,这样反而会使速度减慢;而是应该中间用array缓存起来,循环结束后调用xx.innerHTML=array.join(‘’);的方式,或者至少保存到string中再插到innerHTML中.

针对用户列表一块采用这种方式优化后,加载速度提升一倍.

2.单个增加Dom

这里是指要将新节点加载到一个内容不断变化的节点的情形,对于内容稳定的节点来说,随便怎么加都没有问题.但是对于有动态内容的节点来说,为其添加子节点尽量使用domappend的方式.

这是因为,domappend不会影响到其他的节点;而如果修改innerHTML属性的话,该父节点的所有子节点都会从dom树中剥离,再根据新的innerHTML值来重绘子节点dom树;所有注册到原来子节点的事件也会失效.

综上,如果在一个有动态内容的节点上出现了innerHTML+=的代码,就该考虑是否有问题了.

3.创建Dom节点

用createElement方式创建一个dom节点,有一个很重要的细节:在执行完createElement代码之后,应该马上append到dom树中;否则,如果在将这个孤立节点加载到dom树之前所做的赋值它的属性和innerHTML的操作都会引发该dom片段内存无法回收的问题.这个不起眼细节,一旦遇到大量dom增删操作,就会引发内存的灾难.

4.删除Dom节点

删除dom节点之前,一定要删除注册在该节点上的事件,不管是用observe方式还是用attachEvent方式注册的事件,否则将会产生无法回收的内存.

另,在removeChild和innerHTML=’’二者之间,尽量选择后者.因为在sIEve(内存泄露监测工具)中监测的结果是用removeChild无法有效地释放dom节点.

5.创建事件监听

现有的js库都采用observe方式来创建事件监听,其实现上隔离了dom对象和事件处理函数之间的循环引用,所以应该尽量采用这种方式来创建事件监听.

6.监听动态元素

Dom事件默认是向上冒泡的,发生在子节点中的事件,可以由父节点来处理.Event的target/srcElement仍是产生事件的最深层子节点.这样,对于内容动态增加并且子节点都需要相同的事件处理函数的情况,可以把事件注册上提到父节点上,这样就不需要为每个子节点注册事件监听了.

同时,这样做也避免了产生无法回收的内存.即使是用Prototype的observe方式注册事件并在删除节点前调用stopObserving,也会产生出少量无法回收的内存,所以应该尽量少的为dom节点注册事件监听.

所以,当代码中出现在循环里注册事件时,也是我们该考虑事件上提机制的时候了.

来源于

http://hi.baidu.com/lim_ao/blog/item/a1495e5d52b5ae52faf2c060.html