《高性能JavaScript》学习笔记（二）

?

三、DOM编程

?

DOM & Javascript 为两个独立的系统。通过接口来进行访问。 所以对DOM操作越多，性能消耗就对大！

?

将处理全部放在Javascript端：

?

? ? ? ? ?html的拼接、调整之类的操作，可以现在javascript端进行处理完后，一次性对DOM进行操作。 这样能够减少多DOM的操作次数；

?

使用数组来合并大量字符串；

?

?

大段的html更新，使用innerHTML能有更好的性能；

?

?

克隆现有的节点；

?

?

HTML集合，在需要获取更新后的信息时（比如length），都会执行一次查询。低效之源；

?

?

如果要遍历一个HTML集合，请将其先转换为数组，因为数组操作要明显的快一些；

?

?

记住！减少DOM的嵌套链，如果需要反复的调用某个通过DOM获得对象，请将其缓存；

?

?

选择器API，虽然速度快，但是不是所有的浏览器都支持。

?

?

页面包含两个数据结构： DOM树、 渲染树。

?

?

当DOM树改变的时候，渲染树就会重绘整个页面（隐藏的DOM元素，在渲染树中没有节点）

?

?

当改变影响到页面的几何结构时，渲染树会进行重排。物理变化产生时，会导致重排。重排导致计算消耗。

?

?

浏览器会把一些变化要求做成批量修改的方式，n个修改只做一次重排。但是一些取值会导致强制刷新队列，立即重排。反复取值，会导致性能损失。

?

解决方案： 将修改做完后，统一刷新队列；

?

? ? ? ? ? ? ? ? 样式修改放置在style.cssText中。而不是style一个一个点；

?

? ? ? ? ? ? ? ? 改变一个元素时，先将其脱离文档流，display:none。修改完之后，再block；

?

? ? ? ? ? ? ? ? 使用片段， fragment；

?

? ? ? ? ? ? ? ? 创建一个节点备份，修改副本，用副本替换原有节点。

?

?

事件委托：

?

? ? ? ? ?当一个元素的子元素都需要响应点击事件的时候，不要给子元素绑定点击事件，而是给父元素绑定事件后，在冒泡阶段判断事件的target。

?

?

?