《高性能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。