# 回流和重绘以及两者区别
https://www.jianshu.com/p/e081f9aa03fb (opens new window)
https://segmentfault.com/a/1190000017329980 (opens new window)
# 回流
计算可见dom节点在浏览器中确切的位置和几何信息
# 重绘
将可见的dom节点转化成屏幕上实际像素
# 如何导致回流重绘
回流一定会触发重绘，而重绘不一定会回流
- 添加或删除可见的DOM元素
- 元素的位置发生变化
- 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
- 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
- 页面一开始渲染的时候（这肯定避免不了）
- 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
# 避免回流重绘
# 批量修改DOM
当我们需要对DOM对一系列修改的时候，可以通过以下步骤减少回流重绘次数：
- 使元素脱离文档流
- 对其进行多次修改
- 将元素带回到文档中。
该过程的第一步和第三步可能会引起回流，但是经过第一步之后，对DOM的所有修改都不会引起回流，因为它已经不在渲染树了。
# 有三种方式可以让DOM脱离文档流：
# 隐藏元素，应用修改，重新显示
展示和隐藏节点会导致两次重绘
function appendDataToElement(appendToElement, data) {
let li;
for (let i = 0; i < data.length; i++) {
li = document.createElement('li');
li.textContent = 'text';
appendToElement.appendChild(li);
}
}
const ul = document.getElementById('list');
ul.style.display = 'none';
appendDataToElement(ul, data);
ul.style.display = 'block';
# 使用文档片段(document fragment)在当前DOM之外构建一个子树，再把它拷贝回文档。
const ul = document.getElementById('list');
const fragment = document.createDocumentFragment();
appendDataToElement(fragment, data);
ul.appendChild(fragment);
# 将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素。
const ul = document.getElementById('list');
const clone = ul.cloneNode(true);
appendDataToElement(clone, data);
ul.parentNode.replaceChild(clone, ul);
# 避免触发同步布局事件
由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。
浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。
但是！当你获取布局信息的操作的时候，会强制队列刷新
- offsetTop、offsetLeft、offsetWidth、offsetHeight
- scrollTop、scrollLeft、scrollWidth、scrollHeight
- clientTop、clientLeft、clientWidth、clientHeight
- getComputedStyle()
- getBoundingClientRect
# 对于复杂动画效果,使用绝对定位让其脱离文档流
- 对于复杂动画效果 会引起父元素以及后续元素频繁的回流
- 由于会经常的引起回流重绘，因此，我们可以使用绝对定位，让它脱离文档流
# css3硬件加速（GPU加速）
- 使用css3硬件加速，可以让
transform、opacity、filters这些动画不会引起回流重绘 。 - 但是对于动画的其它属性，比如
background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能
# css3硬件加速的坑
- 如果你为太多元素使用css3硬件加速，会导致内存占用较大，会有性能问题。
- 在GPU渲染字体会导致抗锯齿无效。这是因为GPU和CPU的算法不同。因此如果你不在动画结束的时候关闭硬件加速，会产生字体模糊