前端页面渲染机制-笔记

前端页面渲染机制-笔记浏览器基础结构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后端模块完成）