浏览器的重绘与重排

• 重排：部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素
• 重绘：由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色之后，屏幕上部分内容需要更新，表现为某些元素的外观被改变

单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，会重新绘制受到此次重排影响的部分
重排和重绘代价是高昂的，他们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们都会选择代价最小的重绘
重绘不一定会发生重排，但是重排一定会发生重绘

如何触发重排和重绘

任何改变构建渲染dom树的操作都会导致一次重排或者重绘：

• 添加、删除、更新dom
• 通过display:none隐藏一个DOM节点-触发重排和重绘
• 通过visibility:hidden隐藏一个DOM节点-只触发重绘，因为没有发生几何变化
• 移动或者给页面的DOM节点添加动画
• 添加一个样式表，调整样式的属性
• 用户行为，例如调整窗口大小，改变字号，或者滚动。

如何避免重绘或者重排

集中改变样式
我们往往通过改变class的方式来集中改变样式

使用DocumentFragment
当我们想要去进行大量节点插入操作的时候， 我们可以先通过DocumentFragment创建一个游离于DOM树之外的节点，然后在此节点上进行dom的插入操作，最后再将这个DocumentFragment节点插入dom，因此只触发一次重排

var fragment = document.createDocumentFragment()
for (let i = 0, i < 10; i++) {
	let node = document.createElement('p')
	node.innerHtml = `这是第${++i}个p`
	fragmen.appendChild(node)
}
document.body.appendChild(fragment)

提升为合成层
将元素提升为合成层有以下的优点：

• 合成层的位图，会交由GPU合成，比CPU处理更快
• 当需要repaint时，只需要repaint本身，不会影响到其他的层
• 对于transform和opacity效果，不会触发layout和paint

提升合成层的最好方式是使用CSS的will-change属性：

#target {
  will-change: transform
}