tiantingrui
commented
2 years ago 重绘与重排
重排与重绘——渲染性能问题重要抓手
我们知道，只有经过HTML解析->CSS解析->渲染树构建->布局->绘制这样一个漫长的过程，页面才能够得以呈现在我们面前，不过这还不是故事的全部——在页面初始化完成后，我们可能会通过CSS、JS来对页面中的元素进行修改，这些修改会重新触发页面的一部分生命周期，进而带来性能上的开销。 重走页面生命周期的这个过程，有两种主要的形式——重排与重绘。
什么是重排？
当我们的操作引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是重排（也叫回流）。 简而言之，重排多数情况下是由对元素几何属性的修改引发的。 举个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>重排demo</title>
<style>
#target {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="target">
<span id="targetText">我是一个小测试</span>
</div>
</body>
</html>var targetDom = document.getElementById('target');
targetDom.style.width = '200px';这样的一个修改宽度的动作，不仅影响了盒模型本身的“占地面积”、还会整个页面中其它元素的布局形式。浏览器不得不重新针对布局信息进行计算，这就是典型的重排过程。 当重排发生时，会按如下顺序进行：
构建DOM -> 修改CSSOM -> 更新 渲染树 -> 重新布局 -> 重绘制
什么动作还会触发重排？
注意，重排多数情况下是由对元素几何属性的修改引发的，但不总是由此引发的。以下操作也会触发重排
- 改变DOM树结构 主要值得是节点的增减、移动等操作
- 获取一些特点属性的值（重要） 比如：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 等属性。
这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流。
除此之外，当我们调用了 getComputedStyle 方法，或者 IE 里的 currentStyle 时，也会触发回流。原理是一样的，都为求一个“即时性”和“准确性”。
什么是重绘？
当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这个过程叫做重绘。
简而言之，重绘是由对元素绘制属性的修改引发的。
举个例子：
var targetDom = document.getElementById('targetText');
targetDom.style.color = 'red';浏览器要想改变文字的颜色，只需要去变更像素点的色值即可，不涉及任何布局计算。因此，这是一个典型的重绘过程。
当重绘发生时，“重新来过”的流程如下:
构建DOM -> 修改CSSOM -> 更新渲染树 -> 重绘制 （**这里省下了重布局的操作**）
浏览器渲染引擎运行机制
渲染引擎工作流解析
浏览器的渲染引擎承载着把 静态资源转换为可视化界面的任务
渲染引擎处理主要包含以下几个具体流程：
整体来看，这五个过程分别完成了以下任务：
1. HTML解析
在这一步浏览器对HTML文档进行解析，并在解析 HTML 的过程中发出了页面渲染所需的各种外部资源请求。
2. CSS解析
浏览器将识别并加载所有的 CSS 样式信息。
3. 样式与结构合并
将样式信息和文档结构合并，最终生成页面 render 树（:after :before 这样的伪元素会在这个环节被构建到 DOM 树中）。
4. 布局阶段
页面中所有元素的相对位置信息，大小等信息均在这一步得到计算。
5. 页面绘制
在这一步中浏览器会根据我们前面处理出来的结果，把每一个页面图层转换为像素，并对所有的媒体文件进行解码。
这五个步骤可以说是每一步都很关键，每一步都不白干，每一步都有一个阶段性产物作为收获。这些产物是我们理解渲染过程的重要抓手：
阶段性产物分析
这五个流程分别对应了以下五个产物：