一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第27天，点击查看活动详情。
减少重绘重排
当你查询布局信息时，比如获取偏移量(offsets)、滚动位置(scroll values) 或计算的样式值(computedstyle values)时，浏览器为了返回最新的值，会刷新队列并应用所有变量。最好的做法是尽量减少布局信息的获取次数，获取后把它赋值给局部变量，然后再操作局部变量。
用展开/折叠的方式来显示和隐藏部分页面是一种很常见的交互模式。它通常包括展开区域的几何动画，并将其他页面部分推向下方。
一般来说，重排只影响渲染树中的一小部分，但也可能影响更多甚至整棵树。浏览器所需的重排次数越少，应用程序的响应速度就越快。因此当页面顶部的一个动画推移页面整个余下的部分时会导致一次代价昂贵的大规模重排。渲染树中需要重新计算的节点越多，情况就越糟。
- 使用绝对位置定位页面上的动画元素，将其脱离文档流
- 让元素动起来。当它扩大时，会临时覆盖部分页面。但这只是页面一个小区域重绘过程，不会产生重排并重绘页面的大部分内容。
- 当动画结束时恢复定位，从而只会下移一次文档的其他元素。
事件委托
当页面存在大量元素，而且每一个都要一次或多次绑定事件处理器时，这种情况可能会影响性能。每绑定一个事件处理器都是有代价的，它要么加重了页面负担（更多的代码、标签），要么增加了运行期的执行时间。需要访问和修改的 DOM 元素越多，应用程序就越慢，特别是事件绑定通常发生在onload时，此时对每一个富交互应用的网页来说都是一个拥堵的时刻。事件绑定占用了处理事件，而且浏览器要跟踪每个事件处理器，这也会占用更多的内存。
事件委托原理：事件逐层冒泡并能被父级元素捕获。使用事件代理，只需要给外层元素绑定一个处理器，就可以处理在其子元素上触发的所有事件。
根据DOM标准，每个事件都要经历三个阶段：
- 捕获
- 到达目标
- 冒泡
事件委托技术并不复杂，你只需要检查事件是否来自你所预期的元素。
总结
访问和操作 DOM 是现代 Web 应用的重要部分。为了减少 DOM 编程带来的性能损失
· 最小化 DOM 访问次数
- 如果需要多次访问某个 DOM 节点，使用局部变量存储引用
- 使用更快速的 API
- 减少重绘重排
- 离线操作 DOM，使用缓存，减少布局信息访问
- 使用绝对定位
- 使用事件委托减少事件处理器数量
