关于前端:jsliang-求职系列-22-回流和重绘

一 目录

不折腾的前端，和咸鱼有什么区别

二 前言

返回目录

1. 什么是回流？
2. 什么状况下触发回流？
3. 什么是重绘？
4. 什么状况下触发重绘？
5. 如何防止回流和重绘？

三 浏览器渲染过程

返回目录

如上图，浏览器的渲染过程为：

1. 解析 HTML，生成 DOM 树
2. 解析 CSS，生成 CSS 规定树（CSS Rule Tree）
3. 将 DOM Tree 和 CSS Rule Tree 相结合，生成 渲染树（Render Tree）
4. 从根节点开始，计算每一个元素的大小、地位，给出每个节点所应该呈现的屏幕准确坐标，从而失去基于渲染树的 布局渲染树（Layout of the render tree）。
5. 遍历渲染树，将每个节点用 UI 渲染引擎来绘制，从而将整棵树绘制到页面上，这个步骤叫 绘制渲染树（Painting the render tree）

这个过程面试中十分常见，小伙伴们略微记一下，前面章节会重复提及。

四 重绘

返回目录

• 什么是重绘？

重绘（repaint）：当元素款式的扭转不影响布局时，浏览器将应用重绘对元素进行更新，此时因为只须要 UI 层面的从新像素绘制，因而 损耗较少。

在浏览器渲染过程中，对应步骤 5，即每次产生重绘，咱们都会从新绘制渲染树，而后进行展现。

• 如何触发重绘？

1. 批改背景色、色彩（background、color）
2. 设置可见度（visibility）
3. 设置背景图（background-image）
4. ……等

五 回流

返回目录

• 什么是回流？

回流（reflow）：又叫重排（layout）。当元素的尺寸、构造或者触发某些属性时，浏览器会从新渲染页面，称为回流。

此时，浏览器须要从新通过计算，计算后还须要从新页面布局，而后进行绘制渲染，因而是较重的操作。

• 如何触发回流？

1. 增加删除 DOM 元素
2. 扭转边框、边距、宽高（border、margin、padding、width、height）
3. 浏览器扭转窗口（resize）
4. ……等

六 优化

返回目录

这时候须要一句总结：

• 回流必定会产生重绘，重绘不肯定会引发回流。

看图了解：回流动了 Layout，触发了 Render Tree 进行从新渲染，所以前面还会 Painting。而重绘前面间接 Display，不会触发回流。

当然，很多浏览器都会优化操作：

浏览器会保护 1 个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了肯定的数量或者到了肯定的工夫距离，浏览器就会解决队列，进行一个批处理。这样就会让屡次的回流、重绘变成一次回流重绘。

那么，咱们做一道题：

输入上面回流和重绘的次数：

var s = document.body.style;
s.padding = "2px";
s.border = "1px solid red";
s.color = "blue";
s.backgroundColor = "#ccc";
s.fontSize = "14px";

document.body.appendChild(document.createTextNode('abc!'));

答案：触发回流 4 次，触发重绘 6 次。

在这里，咱们须要理解的是：

• JS 是单线程的，JS 解析的时候渲染引擎是进行工作的。

所以，联合这些内容，咱们能够依据此大略说一下：

• 如何缩小回流和重绘？

1. 【CSS】应用 visibility 替换 display
2. 【CSS】防止 table 布局。对于 Render Tree 的计算通常只须要遍历一次就能够实现，然而 table 布局须要计算屡次，通常要花 3 倍于等同元素的工夫，因而要防止。
3. 【JS】防止频繁做 width、height 等会触发回流的操作。
4. 【JS】操作 DOM 的时候，如果是增加 DOM 节点，能够将所有节点都在 JS 中操作结束，再进行渲染（一次性）

七 参考文献

返回目录

• [x] 浏览器的回流与重绘 (Reflow & Repaint)【浏览倡议：10min】
• [x] 你真的理解回流和重绘吗【浏览倡议：10min】
• [x] 页面重绘和回流以及优化【浏览倡议：5min】
• [x] [浏览器重绘 (repaint) 重排 (reflow) 与优化[浏览器机制]](https://juejin.im/post/684490…【浏览倡议：10min】
• [x] 回流与重绘：CSS 性能让 JavaScript 变慢？【浏览倡议：10min】

jsliang 的文档库由 梁峻荣 采纳 常识共享 署名 - 非商业性应用 - 雷同形式共享 4.0 国内 许可协定 进行许可。<br/> 基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/> 本许可协定受权之外的应用权限能够从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处取得。