浏览器页面渲染的核心流程详解

时间:2021-11-20 来源:未知网络 作者:996建站网

本文首发于我的博客:浏览器页面渲染的核心流程详解 – Cansiny的博客前言

浏览器页面渲染的核心流程详解插图

先上一张 chrome 浏览器渲染流程图,可以在 performance 面板查看

分为以下几个步骤:

  1. parse HTML:解析 HTML 文本构建 DOM Tree
  2. Recalc Styles:样式计算,生成 CSSOM Tree
  3. Layout:计算可见元素几何信息(位置、尺寸)生成 Layout Tree,也就是我们常说的重排 reflow
  4. update layer tree:创建层叠上下文和元素层级顺序,即建立 Layer Tree
  5. paint:这一步记录需要调用绘制的方法 draw calls,在光栅化 Rasterization 时,draw calls 会被执行。
  6. Composite Layers:某些特殊的渲染层会被认为是合成层(Compositing Layers),Composite 负责处理它们
  7. 然后将这些信息交给compositor thread 处理,然后给 GPU 打印到屏幕

构建 DOM 树

这部分取自三元大佬的文章第 4 篇: 说一说从输入 URL 到页面呈现发生了什么?——解析算法篇

由于浏览器无法直接理解 HTML 字符串,因此需要将这一系列的字节流转换为一种有意义并且方便操作的数据结构,这种数据结构就是DOM TreeDOM Tree本质上是一个以document为根节点的多叉树。

HTML 解析算法分为两个阶段:

  1. 标记化
  2. 建树

对应的两个过程就是词法分析语法分析

标记化算法

这个算法输入为HTML文本,输出为HTML标记,也称为标记生成器。其中运用有限自动状态机来完成。即在当当前状态下,接收一个或多个字符,就会更新到下一个状态。

<html>
  <body>
    Hello world
  </body>
</html>

浏览器页面渲染的核心流程详解插图1

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序