【CSS】回流/重排与重绘

• 浏览器使用流式布局模型 (Flow Based Layout)。
• 浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。
• 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
• 由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。
  

回流/重排

回流的基本概念

当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

会引起浏览器回流的操作

• 页面首次渲染
• 浏览器窗口大小发生改变
• 元素尺寸或位置发生改变
• 元素内容变化（文字数量或图片大小等等）
• 元素字体大小变化
• 添加或者删除可见的DOM元素
• 激活CSS伪类（例如：:hover）
• 查询某些属性或调用某些方法，比如说：
  offsetTop(当前元素相对于其 offsetParent 元素的顶部内边距的距离)、
  offsetLeft(当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值)、 offsetWidth、
  offsetHeight、
  scrollTop（对象最顶端和窗口中可见内容最顶端之间的距离）、
  scrollLeft（对象左边界和窗口中目前可见内容最左端之间的距离）、
  scrollWidth（对象的滚动宽度）、
  scrollHeight（对象的滚动高度）、
  clientTop（元素顶部边框的高度）、
  clientLeft、
  clientWidth、
  clientHeight
  除此之外，当我们调用getComputedStyle方法，或者IE里的currentStyle时，也会触发回流，原理是一样

重绘

重绘的概念

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

浏览器优化机制

现代的浏览器都是很聪明的，由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！当你获取布局信息的操作的时候，会强制队列刷新，比如当你访问以下属性或者使用以下方法：

offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()
getBoundingClientRect

如何减少回流和重绘

1. 合并多次对DOM和样式的修改
2. 批量修改DOM
   使元素脱离文档流；对其进行多次修改；将元素带回到文档中
3. 避免触发同步布局事件
   避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
4. 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。
5. 尽量避免使用table布局、避免使用CSS表达式（如calc()）
6. 尽可能再DOM树的最末端改变class

隐藏元素的方法

●display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
● visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
● opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
● position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
● z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
● clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
● transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

---

学习参考
1.浏览器的回流与重排
2.你真的了解回流和重绘吗