01. 基本概念

单纯说概念就是 浏览器渲染会解析css，dom对吧，如果你更改背景颜色，dom等等就需要重新渲染对吧，这个就是重绘和回流。

复杂一点说概念就是

重绘（Repaint）：

定义：重绘是指当元素的样式发生改变，但不影响其布局的情况下，浏览器重新绘制元素的可视部分。

过程：浏览器会根据新的样式属性值更新元素的视觉外观，重新绘制元素的背景色、边框、文本等可视效果。
影响：重绘操作不会影响页面的布局和几何属性，只是重新绘制元素的外观，所以开销相对较小。

回流（Reflow）：

定义：回流是指当页面的布局发生改变，例如元素的尺寸、位置、显示/隐藏状态等改变时，浏览器重新计算并应用所有受影响元素的几何属性，然后重新排列页面中的元素。

过程：浏览器会从页面的根节点开始递归遍历，并计算每个受影响元素的布局属性，例如位置、尺寸、相对关系等。
影响：回流操作涉及大量的计算和重新排列，会导致整个页面或部分页面的重建，开销较大，可能会引起页面闪烁和性能下降。

02. 浏览器请求的基本原理

在知道什么是重绘和回流以后，如果要搞清楚究竟是怎么回事儿，就需要浏览器大概是怎么做的

1. 用户在浏览器地址栏中输入要访问的网址（URL），然后按下回车键。
2. 浏览器会将输入的网址发送给本地的DNS解析器，解析器负责将域名转换为对应的IP地址。
3. 浏览器使用HTTP或HTTPS协议，通过TCP/IP协议与服务器建立网络连接。这个过程包括三次握手，确保客户端与服务器之间的可靠连接。
4. 浏览器向服务器发送HTTP请求，包括请求的方法（GET、POST等）、请求的资源路径、请求头部等信息。
5. 服务器接收到浏览器发送的请求后，根据请求的资源路径和其他参数进行处理。服务器可能需要查询数据库、执行业务逻辑等操作，最终生成相应的数据或页面。
6. 服务器将处理结果封装成HTTP响应，包括响应的状态码、响应头部和响应体等信息。服务器会将响应发送回给浏览器。
7. 浏览器接收到服务器发送的HTTP响应，开始接收响应数据。
8. 浏览器对收到的HTTP响应进行解析，提取出响应头部和响应体等信息。
9. 浏览器开始根据解析得到的响应数据，渲染页面。这个过程包括解析HTML结构、构建DOM树，加载和解析CSS样式，以及执行JavaScript代码。
10. 浏览器将DOM树和CSS样式结合起来，构建渲染树（Render Tree）。渲染树表示了要显示在页面上的所有可见元素及其样式信息。
11. 浏览器根据渲染树的信息，计算每个元素在页面上的位置和大小。这个过程被称为布局或回流（reflow）。
12. 浏览器根据渲染树和布局结果，开始绘制页面的每个元素，将其呈现在屏幕上。
13. 绘制完成后，浏览器将页面呈现给用户进行查看。用户可以与页面进行交互，执行操作。

简单说就如下

url => dns => ip => tcp => http(get,post..) => 获取响应数据(头，数据等) => 解析html => 构建dom树 => css树 => 执行javascript => 结合dom树，css树 身成 render树。 => 渲染出元素位置和大小(回流) => 绘制元素(重绘)

过程大概就是这样, 这里知道了回流和重绘产生的阶段，但是这里其实没有说一些细节概念，但是和回流和重绘相关。

1. 浏览器将DOM解析为DOM树，并将树中的节点分割为多个图层（Layer），以便进行后续的渲染优化。
2. 浏览器对每个图层的节点进行样式计算，确定每个节点的最终样式结果。
3. layout, 渲染出元素位置和大小(回流)
4. 在绘制（Paint）阶段，浏览器将每个节点的绘制命令转化为位图，将节点的内容绘制到图层的位图中
5. 图层作为纹理上传至GPU
6. 浏览器将不同图层的位图进行合成（Composite），按照正确的层次顺序叠加在一起，生成最终的屏幕图像

这就是浏览器渲染的基本流程，为什么要讲这个？为什么要知道图层的概念？

因为重绘和回流可以控制在图层中，可以限制范围，从而提升性能。

03. 重绘代价是什么？

从之前讲的基本概念我们可以知道重绘的代价是比较小的

浏览器会根据新的样式属性值更新元素的视觉外观，重新绘制元素的背景色、边框、文本等可视效果。
影响：重绘操作不会影响页面的布局和几何属性，只是重新绘制元素的外观，所以开销相对较小.

因为它不会改变整体大小，不会导致整体大小重新计算，仅仅改变当前部分，所以代价是比较小的。

这里涉及到一个问题，就是重绘的范围, 我在查资料的时候，对于重绘的说法都是只影响当前的元素，那么他是否有可能影响到其他元素呢？

这里是可能触发重绘的操作

• color
• background
• outline-color
• border-style
• background-image
• outline
• border-radius
• background-position
• outline-style
• visibility
• background-repeat
• outline-width
• text-decoration
• background-size
• box-shadow

重绘的开销其实可以不那么精确计算，因为正常情况下不会出现不停的修改样式，往往是做动画的时候才会出现。这个时候善用 css3动画的gpu加速的特性就好了。

04. 回流的代价是什么？

回流就比较简单了，任何改变都可能导致整个页面回流，最简单的例子就是窗口发生改变，那么整个页面也就回流了。

比如你突然改变一个元素的大小，自然会导致问题，这就是应该避免或者优化的东西。

• width
• top
• text-align
• height
• bottom
• overflow-y
• padding
• left
• font-weight
• margin
• right
• overflow
• display
• position
• font-family
• border-width
• float
• line
• height
• border
• clear
• vertival-align
• min-height
• white-space

05. 优化

05.01. 合并操作

当我们要去修改css，尽量不用使用行内css，多用class，保证修改次数少。
设计 css 的时候，多用选择器。
保证一件事，减少次数，但是这个似乎现在浏览器都做了优化，但是还是需要注意。

在css上注意，在dom操作上也需要注意。
比如我要绑定数据，写一个循环不停的创建，可能会不停的触发回流。

合并就是减少回流次数

• 比如说先隐藏，修改，显示
• 使用 document fragment，是一个在内存中存在但不在 DOM 树中的文档节点，相当于一个临时容器。
• 或者拷贝到一个不显示的地方，在进行移动操作。

05.2. 避免触发同步布局

首先需要知道什么是同步布局事件，我们刚才看了浏览器执行的流程

dom tree => ccs tree => javascript => render tree => layout.

但是如果遇到一种情况

1
2
3
4
5

function a() {
	for(let i=0;i<els.length;i++) {
		els[i].style.width = box.offsetWidth + "px";
	}
}

本来是 javascript 执行以后开始计算整个布局，但是如果你每次都去获取，就会强制计算整个布局，然后返回数据，再一次循环，这个就是问题。

不仅仅是我这种操作会触发

1
2
3
4
5
6
7

function logBoxHeight() {
  box.classList.add('super-big');

  // Gets the height of the box in pixels
  // and logs it out.
  console.log(box.offsetHeight);
}

所以javascript获取属性需要谨慎, 前面如果有样式修改，那么再获取就会触发。

05.03 善用css3硬加加速

简单说就是移动使用transform，来代替top，left。
别用visibility，使用opacity。
如果要写动画，多用可以触发gpu加速的

• transform
• opacity
• filters
• Will-change

05.04 requestAnimationFrame

window.requestAnimationFrame() 是一个用于执行动画的 Web API 方法。它接受一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前被调用。

06. 总结

这里弄清楚了回流和重绘的基本概念，为什么要知道这些概念，从而更好的去提升性能，特别是在一些关键的页面上。

只是现在大家都用框架了，框架帮你做了大部分的事情。

07. 引用

一文教会你何为重绘、回流？
你真的了解回流和重绘吗