浅谈浏览器页面渲染

最新推荐文章于 2024-09-09 22:16:15 发布

Daniel_Yang_1125

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量261

点赞数

分类专栏： 2nd year 文章标签： html 前端

本文链接：https://blog.csdn.net/daniel_yang1125/article/details/106875020

版权

2nd year 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

灵魂拷问：浏览器是如何将 HTML、CSS 和 JavaScript 在屏幕上渲染的呢？

其实，大致的过程是先构建 DOM 和 CSSOM 树；
因此，我们需要确保尽快 ( 为页面优化留了口子 ) 将 HTML 和 CSS 都提供给浏览器。
→

DOM

由 HTML 文件构建 DOM 树的过程大致为：
字节 → 字符 → 令牌 ( token ) → 节点 → DOM

从一个具体的例子细细说来，假设 HTML 代码为：

	<!DOCTYPE html>
	<html>
		<meta charset="utf-8">
		<link href="style.css" rel="stylesheet">
	</html>
	<body>
		<p>Hello<span>web performance</span> students!</p>
		<div><img src="awesome-photo.jpg"/></div>
	</body>

浏览器会这样处理该页面：

转换：浏览器从磁盘或网络读取 HTML 的原始字节，并根据文件的指定编码 ( 例如 UTF-8 ) 将它们转换成各个字符；
token 化：浏览器将字符串转换成 W3C HTML5 标准规定的各种 token 如 “<html>”、"<body>" 等其它尖括号内的字符串，每个 token 都具有特殊含义和一组规则；
词法分析：发出的 token 转换成定义其属性和规则的 Node 节点对象；
DOM 构建：最后，创建的 Node 节点链接在一个树数据结构内，即 DOM 树 🌲

DOM 树
整个流程的最终输出是页面的文档对象模型 ( DOM )，浏览器对页面进行的所有进一步处理都会用到它 👆
DOM 树捕获文档标记的属性和关系，但并未告诉我们元素在渲染后应呈现的外观，这个嘛，就是 CSSOM 的事情了

CSSOM

与处理 HTML 时一样，浏览器需要将收到的 CSS 规则转换成它能理解和处理的东西 → CSSOM

浏览器对 CSS 的处理过程
CSS 字节转换成字符，接着转换成令牌和节点，最后链接到一个称为 “CSS 对象模型 ( CSSOM )” 的树结构内：
CSSOM Tree
CSSOM 为何会具有树结构呢？
上面两步浏览器根据 HTML 和 CSS 输入构建了 DOM 和 CSSOM 树；
不过，它们都是独立的对象，一个描述文档内容，一个描述对文档应用的样式规则；
下一步，浏览器如要将它们合并在一起 ❤️

渲染树（Render Tree）

为构建渲染树，浏览器大体上完成了下列工作：

从 DOM 树的根节点开始遍历每个可见节点：
- 某些节点不可见 ( 如脚本标记、meta 标记等 )，因为它们不会体现在渲染输出中，所以会被忽略；
- 某些节点通过 CSS 隐藏，因此在渲染树中也会被忽略，如应用了 display: none 的节点
对于每个可见节点，为其找到适配的 CSSOM 规则并应用它们咋个应用法
Emit visible nodes with content and their computed styles

最终输出的渲染同时包含了屏幕上的所有可见内容及其样式信息；
有了渲染树，浏览器就可以进入「布局」阶段了。

布局（Layout）

到目前为止，我们计算了哪些节点应该是可见的以及它们的计算样式 ( Computed Style? )，但我们尚未计算它们在设备视口内的确切位置和大小 → 这，就是布局 ( Layout ) 阶段，也称 “ 自动重排 ”
浏览器就从渲染树的根节点开始遍历，确定每个节点在网页上的具体位置和大小，所有相对测量值都转换为屏幕上的绝对像素，最终输出的一个 “ 盒模型 ”。