高性能Javascript第三章DOM编程

笔记：

1. 访问DOM元素是有代价的，最坏的情况是在循环中访问或者修改元素，尤其是对HTML元素集合循环操作。
2. 换一种效率更高的方法，用局部变量存储修改中的内容，在循环结束后一次性写入。
3. 通用经验法则是：减少访问DOM的次数，把运算尽量留在ECMAScript这一端处理。
4. 如果在一个对性能有着苛刻要求的操作中更新一大段HTML，推荐使用innerHtml,因为它绝大部分浏览器中都运行得更快。但对大多数日常操作而言，并没有什么太大区别。
5. 使用DOM方法更新页面内容的另一个途径是克隆已经有的元素，而不是创建元素----换句话说，就是使用element.cloneNode()代替document.createElement()
6.  以下方法的返回值就是一个集合。document.getElementsByName()/ByClassName()/ByTagName().提供了数组中length的属性，并且还以数字索引的方式访问列表的元素。
7. 优化：把集合的长度缓存到一个局部变量中，然后在循环的条件退出语句中使用该变量。
8. 多次访问同一个DOM属性或者方法，最好使用一个局部变量缓存此成员。
9. 遍历一个集合，集合长度缓存在外部，局部变量代替。
10. 使用chilren代替childNodes会更快。
11. 使用css选择器也是一种定位节点的便利途径。querySelectorAll()的原生的DOM方法。返回一个NodeList
12. DOM树-表示页面结构
13. 渲染树-表示DOM节点如何显示
14. 当几何和布局变化，需要重排。添加删除，位子改变尺寸盒子的，内容改变，浏览器窗口尺寸改变。滚动条出现。
15. 合并多次对DOM的样式修改，一次处理掉。cssText
16. 减少重排：
    （1）使元素脱离文档流----隐藏重现，文档片段，副本节点替换原始。
    （2）对其应用多重改变
    （3）把元素带回文档。
17. 处理DOM事件：事件委托。
18. 事件逐层冒泡并能被父元素捕获。使用事件代理，只需要该外层元素绑定一个处理器，就可以处理在其子元素上触发的所有事件。
19. 三个阶段：捕获，到达目标，冒泡。
20. 
21. 访问事件对象，并判断事件源，取消文档数中冒泡，阻止默认动作（可选）。
    
     

小结：

1. 最小化DOM访问次数，尽量在JS端处理。
2. 多次访问某个DOM节点，局部变量存储引用。
3. 集合长度缓存到一个变量中，经常操作集合，拷贝到一个数组中。
4. querySelectorAll(),firstElementChild.
5. 留意重绘和重排，批量修改样式，离线操作DOM树，使用缓存，并减少访问布局信息的次数。
6. 动画中绝对定位，拖放代理。
7. 事件委托减少事件处理器的次数。