Javascript 高效率http页面优化法则之DOM操作

1. 批量增加Dom

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

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

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

2. 单个增加Dom

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

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

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

3. 创建Dom节点

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

4. 删除Dom节点

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

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

5. 创建事件监听

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

6. 监听动态元素

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

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

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