前端页面渲染机制-笔记

2024年4月3日 148次阅读 来源: 喝冬瓜汤的丁小白

前端页面渲染机制-笔记

浏览器基础结构

  • 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后端模块完成）
    原文作者：喝冬瓜汤的丁小白
    原文地址: https://segmentfault.com/a/1190000018796619
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞