网页被解析的过程

浏览器渲染页面的过程

渲染过程

回流和重绘

回流（reflow）：

• 第一次确定节点的大小和位置，称之为布局（layout）
• 之后对节点的大小、位置修改重新计算称之为回流

重绘（repaint）：

• 第一次渲染内容称之为绘制（paint）
• 之后重新渲染称之为重绘

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/29d4903f-9773-4c4e-b2f1-6dca7218c68f/ChatGPT_logo.svg.webp" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/29d4903f-9773-4c4e-b2f1-6dca7218c68f/ChatGPT_logo.svg.webp" width="40px" /> 浏览器回流（reflow）和重绘（repaint）是浏览器渲染页面时的两个主要流程，它们的区别如下：

1. 回流（reflow）：当DOM的结构或者样式发生变化时，浏览器需要重新计算元素的大小和位置，重新布局整个页面的过程称为回流。回流是一种比较消耗性能的操作，因为它会导致整个页面的重新布局和重绘。
2. 重绘（repaint）：当DOM的样式发生变化时，浏览器只需要重新绘制发生变化的部分，而不需要重新计算元素的位置和大小，这个过程称为重绘。相比于回流，重绘的性能开销较小。

因此，回流的代价比重绘更高，应尽量避免过多的回流操作。例如，通过使用CSS3的transform属性而不是改变元素的位置和大小来实现动画效果，可以减少回流的次数，提升性能。同时，通过批量修改样式、使用虚拟DOM等技术也可以减少回流的次数。

</aside>

开发时避免发生回流的方式

特殊解析——composite 合成

绘制的过程，可以将布局后的元素绘制到多个合成图层中

默认情况下，标准流中的内容都是被绘制在同一个图层（Layer）中的，而一些特殊的属性，会创建一个新的合成层（CompositingLayer），并且新的图层可以利用GPU来加速绘制（因为每个合成层都是单独渲染的）