Reflow and Redraw

回流和重绘以及性能的优化

在解释回流和重绘的概念之前，我们首先需要知道两个概念：DOM 和 CSSOM。

• DOM (Document Object Model) 文档对象模型

  DOM 是 HTML 和 XML 文档的编程接口，它提供了对文档的结构化表述，并使得开发人员能够从程序中访问它，改变文档的结构、样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。

• CSSOM (CSS Object Model) CSS对象模型

  CSSOM 是一组允许 JavaScript 操作 CSS 的 API，非常类似于 DOM，它允许用户动态的修改 CSS 样式。

DOM 和 CSSOM 构建

浏览器渲染页面时会构建 DOM 和 CSSOM 树，这个过程可简化如下：

1. 转换 - 浏览器从磁盘或网络读取 HTML 的原始字节，并按照其指定的编码方式将其解析为字符
2. 符号化(令牌化) - 浏览器将字符串转换为 HTML 标准规定的各种具有特殊含义和规则的令牌
3. 词法分析- 将令牌转换为定义了其规则和属性的对象
4. DOM构建 - HTML 标记定义了不同的标记之间的关系，根据标签创建的对象在结构树中根据由原始标记定义的父子关系相互连接。

整个过程最后形成一个文档对象结构模型，即 DOM。CSSOM 的构建与 DOM 的构建非常类似，不再重复。

渲染树的构建

最后 CSSOM 和 DOM 会结合形成渲染树。渲染树用来计算每个可见元素的布局，并在绘制到屏幕的过程中作为输出，简化后的过程如下：

1. 从 DOM 树的根节点开始，遍历每个可见的节点
   • 有些节点是不可见的（比如 <script> 标签、<meta> 标签 等），这些节点会被忽略， 因为它们并不影响渲染的输出
   • 一些节点通过 CSS 被隐藏了，它们也会被忽略
2. 为每一个可见的节点找到匹配的 CSSOM 规则并在节点上应用这些规则
3. 将节点连同内容和计算好的样式发送出去

渲染树构建完成后，即进入 “布局” 阶段。

布局

在渲染树中我们已经计算好了哪个节点应该被显示和它们的计算样式，但是对于它们在设备的视口中的精确位置和大小还没有进行计算，对其进行计算就是 ”布局“，也被称为 回流。

为了计算页面中每个对象的精确位置和大小，浏览器从渲染树的根节点开始遍历。

布局过程的输出是一个“盒子模型”，它精确地捕获视口中每个元素的确切位置和大小：所有相对测量值都转换为屏幕上的绝对像素。

绘制

布局完成后，我们已经知道了节点的可见性、计算样式和几何结构，浏览器将会把渲染树中的每个节点转换为屏幕上的实际像素。这个步骤通常被称为 ”绘制“ 或 ”栅格化“；

由于浏览器需要进行大量的工作进行绘制，这个阶段可能会花费一些时间。

回流

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

可能会引起回流的操作如下

• 页面首次渲染
• 浏览器窗口大小发生改变
• 元素尺寸或位置发生改变
• 元素内容发生改变
• 元素字体大小发生变化
• 添加或删除可见的 DOM 元素
• 激活 CSS 伪类
• 查询某些属性或调用某些方法

常用且可能导致回流的属性和方法

• clientWidth , clientHeight, clientTop, clientLeft
• offsetWidth, offsetHeight, offsetTop, offsetLeft
• scrollWidth, scrollHeight, scrollTop, scrollLeft
• scrollIntoView(), scrollIntoViewIfNeeded()
• getComputedStyle()
• getBoundingClientReact()
• scrollTo()

重绘

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

性能影响

回流比重绘的代价要高的多。有时候仅仅回流一个单一的元素，它的父元素及任何与它相关的元素都会产生回流。

浏览器会对频繁的回流或重绘操作进行优化：

浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的时候，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。

当你访问下列属性是，浏览器会立刻清空队列：

• clientWidth , clientHeight, clientTop, clientLeft
• offsetWidth, offsetHeight, offsetTop, offsetLeft
• scrollWidth, scrollHeight, scrollTop, scrollLeft
• width, height
• getComputedStyle()
• getBoundingClientRect()

因为队列中可能会有影响到这些属性或方法返回值的操作，即使你希望获取的信息与队列中操作引发的改变无关，浏览器也会强行清空队列，确保你拿到的值是最精确的。

如何避免回流

CSS

• 避免使用table布局。
• 尽可能在DOM树的最末端改变class。
• 避免设置多层内联样式。
• 将动画效果应用到position属性为absolute或fixed的元素上。
• 避免使用CSS表达式（例如：calc()）。

JavaScript

• 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
• 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
• 也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
• 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
• 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。