了解浏览器中的渲染：DOM 是如何生成的？
在之前的文章中我们了解了 DOM 和 CSSOM，如果你对这两个词还有疑问，我建议你阅读下面两篇文章：
- 了解浏览器中的渲染：DOM
- 了解浏览器中的渲染：CSSOM
回顾一下，DOM 是浏览器用来渲染页面的结构。然而，互联网数据并不是以 DOM 的形式传输的，因此在 DOM 准备好供浏览器使用之前需要有一个过程。
此时您可能想知道数据如何在互联网上传输？
每当我们访问网站时，都会以我们称为客户端 x 服务器的模式进行交换。
在这个交换中，客户端（你的浏览器）请求服务器访问网站www.cristiano.dev，服务器响应所请求网站的所有内容，但是这些内容以字节的形式出现，并且以某种方式这与我们所知的 html/css/js 相差甚远。
浏览器将从服务器接收到的是一个字节序列。
对于服务器提供的这个一小段 html ：
<!doctype html>
<html>
<head>
<title>Um título</title>
</head>
<body>
<a href="#">Um link</a>
<h1>Um cabeçalho</h1>
</body>
</html>
浏览器将以字节为单位接收如下内容：
3C21646F63747970652068746D6C3E0A3C68746D6C3E0A20203C686561643E0A202020203C7469746C653E556D2074C3AD74756C6F3C2F7469746C653E0A20203C2F686561643E0A20203C626F64793E0A202020203C6120687265663D2223223E556D206C696E6B3C2F613E0A202020203C68313E556D2063616265C3A7616C686F3C2F68313E0A20203C2F626F64793E0A3C2F68746D6C3E
但是，浏览器无法仅使用此信息呈现页面。为了组装我们的布局，浏览器将在获得 DOM 之前执行几个步骤。
这些步骤是：
- 转换
- 代币化
- 乐行
转换：字节到字符
在此步骤中，浏览器从网络或磁盘读取原始数据，并根据文件中指定的编码（例如 UTF-8）将其转换为字符。
基本上就是浏览器将字节转换为我们日常生活中编写的格式的代码的步骤。
标记化：标记的字符
在此阶段，浏览器将字符串转换为称为标记的小单位。标签和内容的每个开始、结束都被计算在内，此外，每个标记都有一组特定的规则。
例如，标签 与
标签具有不同的属性如果没有这一步，我们只会得到一堆对浏览器没有意义的文本，在此过程结束时，我们的基本 html 将像这样被标记：
- ; ➔ 令牌：DOCTYPE，值：html
- ➔ 令牌：StartTag，名称：html
- <头> ➔ 令牌：StartTag，名称：头
- ➔ 令牌：开始标签，名称：标题
- 标题示例 ➔ Token：字符，数据：标题示例
- ➔ 令牌：结束标签，名称：标题
-
➔ 令牌：StartTag，名称：p
- 你好世界！ ➔ 令牌：字符，数据：世界您好！
- ➔ 令牌：EndTag，名称：p
标记是文本中的单个单词或符号。 “标记化”是将文本分解为更小的单词、短语或符号的过程。
词法分析：节点的令牌
词法分析步骤（词法分析）负责将标记转换为对象，但这还不是 DOM。此时，浏览器正在生成 DOM 的隔离部分，其中每个标签将转换为具有属性的对象，该对象带来与属性、父标签、子标签等相关的信息
对标签进行词法分析后的结果
会是这样的：
<!doctype html>
<html>
<head>
<title>Um título</title>
</head>
<body>
<a href="#">Um link</a>
<h1>Um cabeçalho</h1>
</body>
</html>
DOM 构建：DOM 节点
我们终于到达了 DOM 构建阶段！
此时，浏览器将考虑 html 标签之间的关系，并将节点连接成树形数据结构，以分层方式表示这些关系。例如：html 对象是 body 对象的父对象，body 是段落对象的父对象，直到创建文档的整个表示。
构建结束时，我们的示例 html 变成如下所示的对象树：
3C21646F63747970652068746D6C3E0A3C68746D6C3E0A20203C686561643E0A202020203C7469746C653E556D2074C3AD74756C6F3C2F7469746C653E0A20203C2F686561643E0A20203C626F64793E0A202020203C6120687265663D2223223E556D206C696E6B3C2F613E0A202020203C68313E556D2063616265C3A7616C686F3C2F68313E0A20203C2F626F64793E0A3C2F68746D6C3E
回顾
构建 DOM 的过程很复杂，分以下步骤进行：
- 转换：浏览器接收HTML并将其从字节转换为字符。
- 标记化：字符被转换为表示 html 部分（标签、属性、文本）的标记。
- 词法分析：令牌被组织成对象节点
- DOM：对象以分层方式组织在树状数据结构中。
CSSOM 也发生类似的过程，包括转换、标记化和词法分析。
结论
您一定想知道在日常开发中如何应用这些知识......
确实，此类信息不会被频繁请求，但了解浏览器（主要的前端工作工具）本质上如何工作非常重要。
这些知识对于理解我们将在这里讨论的下一个主题也非常有价值：绘制、重绘、流动和回流。
非常感谢！！
感谢您来到这里！
我希望您在阅读本文时学到了一些新东西。
下次再见！
参考
构建对象模型
解构网页：页面渲染
以上是了解浏览器中的渲染：DOM 是如何生成的？的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Python vs. JavaScript：学习曲线和易用性
Apr 16, 2025 am 12:12 AM
Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。
JavaScript在行动中：现实世界中的示例和项目
Apr 19, 2025 am 12:13 AM
JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。
了解JavaScript引擎：实施详细信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。
Python vs. JavaScript：开发环境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。
C/C在JavaScript口译员和编译器中的作用
Apr 20, 2025 am 12:01 AM
C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高JavaScript的执行效率。
Python vs. JavaScript：比较用例和应用程序
Apr 21, 2025 am 12:01 AM
Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。
从网站到应用程序：JavaScript的不同应用
Apr 22, 2025 am 12:02 AM
JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。
