页面基础（含DOM）

1、浏览器渲染过程

• HTML 解析：浏览器首先解析 HTML 文档，构建 DOM 树。在解析过程中，如果遇到外部资源（如 CSS 文件、JavaScript 文件、图片等），会发起相应的请求去获取这些资源。
• CSS 解析：同时，浏览器会解析 CSS 文件，构建 CSSOM（CSS Object Model）树。CSSOM 描述了文档的样式信息，包括每个元素的样式规则。
• 构建渲染树：结合 DOM 树和 CSSOM 树，浏览器构建渲染树。渲染树只包含需要显示的节点和这些节点的样式信息。
• 布局（Layout）：确定每个节点在屏幕上的位置和大小。布局过程会考虑元素的盒模型、定位方式、尺寸等因素。
• 绘制（Painting）：根据渲染树，浏览器将每个节点绘制到屏幕上。绘制过程包括填充颜色、绘制边框、绘制文本等操作。