高性能 JavaScript 读书笔记（三）

重绘与重排

概念

重排：当元素的宽和高发生改变的时候，就会重新排列元素，称为重拍。

重绘：将重排的的元素重新绘制在浏览器中，称为重绘。

在元素中添加段落、添加边框、添加或者删除元素、修改内外边距等，一切改变现有元素的位置的操作都会导致重排的发生。相应的，添加背景色这一类没有改变元素位置的操作则不会导致重排和重绘。

最小化重绘和重排

重绘和重排的代价非常昂贵，为了减少发生次数，应该减少发起重排请求，尽可能将修改 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 标准，每个事件都要经历三个阶段：

- 捕获 -到达目标 -冒泡