前端页面渲染机制-笔记

前端页面渲染机制-笔记

浏览器基础结构

• 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后端模块完成）