【走进浏览器】谈一谈浏览器渲染的基本原理

浏览器渲染基本原理

浏览器对于前端工程师,就相当于赛车于赛车手,想要更好的在赛道上驰骋,就需要对自己的赛车有更深入的了解,甚至人车合一,所以本篇文章我们就来打开浏览器的大门,一起努力吧!

前言

一篇文章很难将所有的细节覆盖,同时我们也不需要将所有流程和每一个环节都摸透,我们就依照脉络来聊一聊浏览器的渲染过程。

我们都知道一个页面通常由三个部分组成,即HTMl+CSS+JS,并通过一系列的步骤转换。

  • HTML 的内容是由标记和文本组成
  • CSS 称为层叠样式表,是由选择器和属性组成
  • JS 是可以使网页的内容“动”起来

用户请求的 HTML 文本(text/html)基础的渲染流程图大致是这样的:

在这里插入图片描述

  1. 解析 HTML+CSS -> 解析 HTML 生成 DOM 树,同时解析 CSS 生成 CSSOM 树
  2. 构建 Render 树 -> “枝干”和“树芽”配合,两个合并生成新的用于渲染的树
  3. 布局 Render 树 -> 对渲染树的每个节点进行布局处理,确定其在屏幕上的显示位置
  4. 绘制 Render 树 -> 最后遍历渲染树并用 UI 后端层将每一个节点绘制出来,前三步都是在绘制“蓝图”

用流程表示如下图:

在这里插入图片描述
既然浏览的渲染分流程,我们也按照它的顺序来了解每一步都发生了什么。

一、浏览器渲染基本步骤

引入一个概念——关键渲染路径

从收到 HTML、CSS 和 JavaScript 字节到对其进行必需的处理,从而将它们转变成渲染的像素这一过程,即关键渲染路径。

1.1 构建对象模型

斟酌了一下,决定将 DOM 树和 CSSOM 树放在一起。浏览器在渲染页面之前第一步就需要先构建DOM树CSSOM树,因此我们需要确保尽快将 HTML 和 CSS 提供给浏览器。

下面是构建对象模型的描述,本章就这些内容:

  • 字节 → 字符 → 令牌 → 节点 → 对象模型
  • HTML 标记转换成文档对象模型 (DOM);
  • CSS 标记转换成 CSS 对象模型 (CSSOM)。
  • DOM 和 CSSOM 是独立的数据结构。
  • Chrome DevTools Timeline 让我们可以捕获和检查 DOM 和 CSSOM 的构建和处理开销。
1.1.1 DOM 树(文档对象模型)

因为浏览器不能直接理解和使用 HTML,所以需要将 HTML 解析为浏览器能够理解的结构,即 DOM 树。DOM 树的根节点就是 document 对象。

试想一下这段代码:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <title>DOM</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> performance</p>
    <div><img src="awesome-photo.jpg" /></div>
  </body>
</html>

一个包含一些文本和一幅图片的普通 HTML 页面。经过字节 -> 字符 … -> 模型过程

在这里插入图片描述

  • 转换: 浏览器从磁盘或网络读取 HTML 的原始字节,并根据文件的指定编码(例如 UTF-8)将它们转换成各个字符。
  • 令牌化: 浏览器将字符串转换成 W3C HTML5 标准规定的各种令牌,例如,<html><body>,以及其他尖括号内的字符串。每个令牌都具有特殊含义和一组规则。
  • 词法分析: 发出的令牌转换成定义其属性和规则的“对象”。
  • DOM 构建: 最后,由于 HTML 标记定义不同标记之间的关系(一些标记包含在其他标记内
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值