共计 653 个字符，预计需要花费 2 分钟才能阅读完成。
前端页面渲染机制 - 笔记
浏览器基础结构
1. 用户界面（user interface）：用户所看到及与之交互的功能组件，如地址栏、返回、前进按钮
2. 浏览器引擎（browser engine）：用户界面和呈现引擎之间传递指令
3. 渲染引擎（呈现引擎）（rendering engine）：负责解析用户请求的内容（HTML,CSS,XML）
4. 网络（networking）：负责处理网络相关的事物（HTTP）
5.UI 后端（UI backend）：负责绘制提示框等浏览器组件，底层使用的是操作系统的用户接口
6.JavaScript 解释器（JavaScript interpreter）：负责解析和执行 JavaScript 代码
7. 数据存储（Data storage）：负责持久存储如 cookie 和缓存等应用数据
渲染引擎及关键渲染路径
通过网络模块加载到 HTML 文件后渲染引擎渲染流程如下（关键渲染路径）
1. 构建 DOM 树（DOM tree）: 从上到下解析 HTML 文档生成 DOM 节点树
2. 构建 CSSOM 树（CSS Object Model）：加载解析样式生成 CSSOM 树
3. 执行 JavaScript：加载执行 JavaScript 代码
4. 构建渲染树（render tree）：根据 DOM 树和 CSSOM 树，生成渲染树渲染树：按顺序展示在屏幕上的一系列矩形这些矩形带有字体，颜色和尺寸等视觉属性
5. 布局（layout）：根据渲染树将节点布局在屏幕的正确位置
6. 绘制（painting）：遍历渲染树绘制所有节点，为每个节点适用对应的样式（UI 后端模块完成）
