重绘与重排
概念
重排：当元素的宽和高发生改变的时候，就会重新排列元素，称为重拍。
重绘：将重排的的元素重新绘制在浏览器中，称为重绘。
在元素中添加段落、添加边框、添加或者删除元素、修改内外边距等，一切改变现有元素的位置的操作都会导致重排的发生。相应的，添加背景色这一类没有改变元素位置的操作则不会导致重排和重绘。
最小化重绘和重排
重绘和重排的代价非常昂贵，为了减少发生次数，应该减少发起重排请求，尽可能将修改 DOM 的请求合并。
var el = document.getElementById('mydiv');
el.style.cssText = 'border-left:1px;border-right:2px;padding:5px;';减少重排和重绘
可以通过以下步骤来减少重绘和重排的次数：
1.使元素脱离文档流
2.对其应用多重改变
3.把元素待会文档中
这样一来，只有第一步和第三部会触发重排。否则，如果对元素的修改较多的话，第二步会触发多次重排。
有三种方法可以使 DOM 脱离文档：
> 隐藏元素，应用修改，重新显示
> 使用文档片段在当前 DOM 之外构建一个子树，再把它拷贝回文档。
> 将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素。
Hover
如果大量使用 hover 会影响性能，降低运行速度。
事件委托
如果页面中存在大量元素，而且每一个都要一次或多此绑定事件处理器。这种情况会影响性能，因为浏览器需要追踪每个事件处理器。
一个简单而优雅的处理 DOM 事件的技术是事件委托。
它基于这样一个事实：事件逐层冒泡并能被父级元素捕获。使用事件代理，只需要给外层绑定一个处理器，就可以处理在其子元素上触发的所有事件。
根据 DOM 标准，每个事件都要经历三个阶段：
- 捕获 -到达目标 -冒泡