网页渲染的主要流程：
-
解析HTML并创建DOM树
- 浏览器从服务器接收到HTML文档后开始解析，构建文档对象模型（DOM）树。这是一个包含文档所有元素的树状结构，每个元素都是一个节点。
-
解析CSS并创建CSSOM树
- 在解析HTML时，浏览器同时下载并解析CSS规则，构建CSS对象模型（CSSOM）树。这个树包含了应用到页面上的所有样式信息。
-
构建渲染树（Render Tree）
- 当DOM树和CSSOM树构建完成后，浏览器会将二者结合，创建一个渲染树。渲染树只包含可视元素，不包括如
<head>、<script>、<style>或设置了display: none的元素。
- 当DOM树和CSSOM树构建完成后，浏览器会将二者结合，创建一个渲染树。渲染树只包含可视元素，不包括如
-
布局（Layout / Reflow）
- 渲染树构建完成后，浏览器开始布局，计算每个元素的几何尺寸和位置。这个过程称为布局或回流（reflow）。
-
绘制（Paint / Repaint）
- 完成布局后，浏览器将渲染树中的元素绘制到屏幕上。这个过程称为绘制或重绘（repaint）。
-
执行JavaScript
- 如果页面中有JavaScript代码，它会在适当的时机被解析和执行。JavaScript可以修改DOM和CSSOM，从而触发新的渲染流程。
-
事件处理和交互
- 用户与页面的交互（如点击、滚动等）也会触发重新布局和重绘，以反映新的状态。
-
优化和缓存
- 浏览器会尝试缓存资源和中间结果，避免不必要的重渲染，提高性能。
