重绘(repaint)和重排(reflow)
接着上一篇的输入一个URL到页面展示发生了什么？接着引出了今天的主角：重绘和重排。
前端性能优化一直以来都是要考虑的，这直接影响用户体验，重绘和重排作为前端性能优化的一部分也是面试中的高频考点，所以我们有必要弄清楚重绘和重排的原理，及其对前端性能优化的影响
- 重绘：某些元素的外观被改变，例如：元素的填充颜色，字体颜色的改变
- 重排：重新生成布局，重新排列元素。
一、页面生成的过程
- HTML 被 HTML 解析器解析成 DOM 树；
- CSS 被 CSS 解析器解析成 CSSOM 树；
- 结合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)，这一过程称为 Attachment；
- 生成布局(flow)，浏览器在屏幕上“画”出渲染树中的所有节点；
- 将布局绘制(paint)在屏幕上，显示出整个页面。
- 第四步和第五步是最耗时的部分，这两步合起来，就是我们通常所说的渲染。
页面生成步骤可以总结为下图：
二、重绘重排的相互影响
总结一下就是：
重绘不一定会产生重排
重排一定产生重绘
- 重绘：某些元素的外观被改变，例如：元素的填充颜色，字体颜色的改变
- 重排：重新生成布局，重新排列元素。
就跟以上的定义一样，重新生成了布局，一定要重新绘制，重新绘制了不一定会影响布局（比如说颜色改变）
也就是说：重绘不一定导致重排，但重排一定会导致重绘。
三、重排
当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
重排也叫回流，简单的说就是重新生成布局，重新排列元素。
引起重排的因素：
- 页面初始渲染，这是开销最大的一次重排，因为所有的元素都要计算一下其在页面中的位置
- 添加删除可见的DOM元素
- 浏览器窗口大小改变
- css伪类激活比如:hover
- 改变元素的字体大小、位置、元素尺寸（边距，填充，边框，宽度，高度等）
- 设置style属性的值
- 查询某些属性，或者调用某些计算方法
3.1、重排影响的范围
由于浏览器渲染界面是基于流式布局模型的，所以触发重排时会对周围DOM重新排列，影响的范围有两种：
全局范围：从根节点html开始对整个渲染树进行重新布局。
局部范围：对渲染树的某部分或某一个渲染对象进行重新布局
全局范围的重排：
<body>
<div class="hello">
<h4>hello</h4>
<p><strong>Name:</strong>BDing</p>
<h5>male</h5>
<ol>
<li>coding</li>
<li>loving</li>
</ol>
</div>
</body>
当p节点发生重排的时候，hello元素和body元素也会重新渲染。这就是全局范围的重排。
局部范围的重排：
当我们把一个div盒子的宽高定死，无论里面的元素怎么重排，都不会影响到div盒子外部的元素，都不会导致外边的元素重排。这就是局部范围的重排
四、重绘
当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。
常见的引起重绘的属性：
五、重排优化建议
重排的代价是高昂的，会破坏用户体验，并且让UI展示非常迟缓。通过减少重排的负面影响来提高用户体验的最简单方式就是尽可能的减少重排次数，重排范围。下面是一些行之有效的建议，大家可以用来参考。
5.1、减少重排范围
我们应该尽量以局部布局的形式组织html结构，尽可能小的影响重排的范围
- 尽可能在低层级的DOM节点上，而不是像上述全局范围的示例代码一样，如果你要改变p的样式，class就不要加在div上，通过父元素去影响子元素不好。
- 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局。那么在不得已使用table的场合，可以设置table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围。
5.2、减少重排次数
- 不要频繁的操作样式，对于一个静态页面来说，明智且可维护的做法是更改类名而不是修改样式，对于动态改变的样式来说，相较每次微小修改都直接触及元素，更好的办法是统一在 cssText 变量中编辑。
- 分离读写操作
DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。
例如：
// bad 强制刷新 触发四次重排+重绘
div.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';
div.style.right = div.offsetRight + 1 + 'px';
div.style.bottom = div.offsetBottom + 1 + 'px';
// good 缓存布局信息 相当于读写分离 触发一次重排+重绘
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
var curRight = div.offsetRight;
var curBottom = div.offsetBottom;
div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';
div.style.right = curRight + 1 + 'px';
div.style.bottom = curBottom + 1 + 'px';
原来的操作会导致四次重排，读写分离之后实际上只触发了一次重排，这都得益于浏览器的渲染队列机制：
当我们修改了元素的几何属性，导致浏览器触发重排或重绘时。它会把该操作放进渲染队列，等到队列中的操作到了一定的数量或者到了一定的时间间隔时，浏览器就会批量执行这些操作。
5.3、将DOM元素离线
如果某一段操作需要多次操作DOM，这样会造成多次重排，“离线”意味着不在当前的 DOM 树中做修改，我们可以这样做：
- 使用 display:none
一旦我们给元素设置 display:none 时（只有一次重排重绘），元素便不会再存在在渲染树中，相当于将其从页面上“拿掉”，我们之后的操作将不会触发重排和重绘，添加足够多的变更后，通过 display属性显示（另一次重排重绘）。通过这种方式即使大量变更也只触发两次重排。另外，visibility : hidden 的元素只对重绘有影响，不影响重排。 - 通过 documentFragment 创建一个 dom 碎片,在它上面批量操作 dom，操作完成之后，再添加到文档中，这样只会触发一次重排。
- 复制节点，在副本上工作，然后替换它！
- 使用绝对定位会使的该元素单独成为渲染树中 body 的一个子元素，重排开销比较小，不会对其它节点造成太多影响。当你在这些节点上放置这个元素时，一些其它在这个区域内的节点可能需要重绘，但是不需要重排。
- 启用GPU加速
GPU 硬件加速是指应用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来完成，因为 GPU 是专门为处理图形而设计，所以它在速度和能耗上更有效率。
GPU 加速通常包括以下几个部分：Canvas2D，布局合成, CSS3转换（transitions），CSS3 3D变换（transforms），WebGL和视频(video)
总结
- 渲染的三个阶段 Layout，Paint，Composite Layers。
Layout：重排，又叫回流。
Paint:重绘，重排重绘这些步骤都是在 CPU 中发生的。
Compostite Layers：CPU 把生成的 BitMap（位图）传输到 GPU，渲染到屏幕。 - CSS3 就是在 GPU 发生的：Transform Opacity。在 GPU 发生的属性比较高效。所以 CSS3 性能比较高。
写在最后：
这篇文章是借鉴的掘金一位大佬的写出来的，重绘和重排设计的知识点太多太多了，这次就先写到这。
如果你喜欢这篇文章，那么不妨留个小红心给我，如果发现有写错的地方，可以在评论区指正，我们共同进步。
来自：一个喜欢前端的杰迷
4433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
