浏览器解析并渲染页面的步骤
浏览器通过 http 或者 https 收到数据后，如果数据 html 类型的数据。浏览器就要对html进行解析和渲染。
大致过程如下：
- 解析HTML文件：浏览器使用HTML解析器解析HTML文件，生成DOM树。在解析过程中，如果遇到外部资源（比如图片、CSS文件等），则会发送异步请求获取这些资源。
- 解析CSS文件：浏览器使用CSS解析器解析CSS文件，生成CSSDOM树。
3.构建渲染树：浏览器将DOM树和CSSOM树结合起来，生成渲染树。渲染树描述了每个节点在页面上的位置、大小和样式信息。渲染树中不包含不可见元素和不影响布局元素。
4.布局：浏览器根据渲染树的信息，计算每个元素在页面上的大小和位置，生成布局。这个过程也被称为回流(reflow)。
5.绘制：浏览器根据布局信息，将页面上每个元素绘制出来，生成像素。这个过程也被称为重绘(repaint)。 6.显示：浏览器将生成的像素显示在屏幕上。
生成DOM树
对于这个过程的实现的结果，可以先看一下 这个工具网站 astexplorer.net/ 我们写的代码解析成什么树、都有哪些字段。(具体用代码实现的过程就不细说了)。 解析的过程中用到一个 状态机 可以看看这个。
HTML 解析成DOM树
示例的代码是使用 htmlparser2 库来解析的。
CSS解析成CSSOM树
JavaScript 就不说了
问题
怎么减少页面的回流和重绘？
1.避免频繁访问布局信息：布局信息的计算非常消耗性能，因此避免频繁访问布局信息可以减少回流和重绘。
2.避免频繁修改样式：样式的修改也会触发回流和重绘，因此应该尽量减少样式的修改次数。
3.使用CSS3动画代替JavaScript动画：CSS3 动画使用 GPU 加速，性能较好，而 JavaScript 动画则需要频繁修改 DOM 树和样式，会引起回流和重绘。
4.使用虚拟DOM：虚拟 DOM 可以减少 DOM 操作的次数，从而减少回流和重绘。
5.减少页面元素数量：页面元素的数量越多，页面渲染的时间就越长。
参考资料
developer.mozilla.org/zh-CN/docs/…
juejin.cn/post/700446…
