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

最新推荐文章于 2024-09-06 08:53:02 发布

web15085181368

最新推荐文章于 2024-09-06 08:53:02 发布

阅读量297

点赞数 1

分类专栏：前端 html 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/web15085181368/article/details/123220464

版权

本文深入探讨浏览器的渲染过程，包括构建DOM和CSSOM树、生成Render树、布局和绘制。强调CSS和JavaScript对渲染的影响，解释回流与重绘的概念，帮助前端开发者优化页面性能。

摘要由CSDN通过智能技术生成

浏览器渲染基本原理

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

前言

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

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

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

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

在这里插入图片描述

解析 HTML+CSS -> 解析 HTML 生成 DOM 树，同时解析 CSS 生成 CSSOM 树
构建 Render 树 -> “枝干”和“树芽”配合，两个合并生成新的用于渲染的树
布局 Render 树 -> 对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置
绘制 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 标记定义不同标记之间的关系（一些标记包含在其他标记内）