搜索

首页 >web前端 >js教程 >了解浏览器中的渲染：DOM 是如何生成的？

了解浏览器中的渲染：DOM 是如何生成的？

Linda Hamilton
Linda Hamilton原创
2024-11-11 20:14:03848浏览

在之前的文章中我们了解了 DOM 和 CSSOM，如果你对这两个词还有疑问，我建议你阅读下面两篇文章：

  • 了解浏览器中的渲染：DOM
  • 了解浏览器中的渲染：CSSOM

回顾一下，DOM 是浏览器用来渲染页面的结构。然而，互联网数据并不是以 DOM 的形式传输的，因此在 DOM 准备好供浏览器使用之前需要有一个过程。

此时您可能想知道数据如何在互联网上传输？

每当我们访问网站时，都会以我们称为客户端 x 服务器的模式进行交换。

在这个交换中，客户端（你的浏览器）请求服务器访问网站www.cristiano.dev，服务器响应所请求网站的所有内容，但是这些内容以字节的形式出现，并且以某种方式这与我们所知的 html/css/js 相差甚远。

Entendendo renderização no browser: Como o DOM é gerado?

浏览器将从服务器接收到的是一个字节序列。

对于服务器提供的这个一小段 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 之前执行几个步骤。

这些步骤是：

  • 转换
  • 代币化
  • 乐行

转换：字节到字符

Entendendo renderização no browser: Como o DOM é gerado?

在此步骤中，浏览器从网络或磁盘读取原始数据，并根据文件中指定的编码（例如 UTF-8）将其转换为字符。

基本上就是浏览器将字节转换为我们日常生活中编写的格式的代码的步骤。

标记化：标记的字符

Entendendo renderização no browser: Como o DOM é gerado?

在此阶段，浏览器将字符串转换为称为标记的小单位。标签和内容的每个开始、结束都被计算在内，此外，每个标记都有一组特定的规则。

例如，标签 与

标签具有不同的属性

如果没有这一步，我们只会得到一堆对浏览器没有意义的文本，在此过程结束时，我们的基本 html 将像这样被标记：

  • ; ➔ 令牌：DOCTYPE，值：html
  • ➔ 令牌：StartTag，名称：html
  • <头> ➔ 令牌：StartTag，名称：头
  • ➔ 令牌：开始标签，名称：标题
  • 标题示例 ➔ Token：字符，数据：标题示例
  • ➔ 令牌：结束标签，名称：标题

  • ➔ 令牌：StartTag，名称：p

  • 你好世界！ ➔ 令牌：字符，数据：世界您好！

  • ➔ 令牌：EndTag，名称：p

Entendendo renderização no browser: Como o DOM é gerado?

标记是文本中的单个单词或符号。 “标记化”是将文本分解为更小的单词、短语或符号的过程。

词法分析：节点的令牌

Entendendo renderização no browser: Como o DOM é gerado?

词法分析步骤（词法分析）负责将标记转换为对象，但这还不是 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 节点

Entendendo renderização no browser: Como o DOM é gerado?

我们终于到达了 DOM 构建阶段！

此时，浏览器将考虑 html 标签之间的关系，并将节点连接成树形数据结构，以分层方式表示这些关系。例如：html 对象是 body 对象的父对象，body 是段落对象的父对象，直到创建文档的整个表示。

构建结束时，我们的示例 html 变成如下所示的对象树：

3C21646F63747970652068746D6C3E0A3C68746D6C3E0A20203C686561643E0A202020203C7469746C653E556D2074C3AD74756C6F3C2F7469746C653E0A20203C2F686561643E0A20203C626F64793E0A202020203C6120687265663D2223223E556D206C696E6B3C2F613E0A202020203C68313E556D2063616265C3A7616C686F3C2F68313E0A20203C2F626F64793E0A3C2F68746D6C3E

回顾

构建 DOM 的过程很复杂，分以下步骤进行：

  • 转换：浏览器接收HTML并将其从字节转换为字符。
  • 标记化：字符被转换为表示 html 部分（标签、属性、文本）的标记。
  • 词法分析：令牌被组织成对象节点
  • DOM：对象以分层方式组织在树状数据结构中。

CSSOM 也发生类似的过程，包括转换、标记化和词法分析。

结论

您一定想知道在日常开发中如何应用这些知识......

确实，此类信息不会被频繁请求，但了解浏览器（主要的前端工作工具）本质上如何工作非常重要。

这些知识对于理解我们将在这里讨论的下一个主题也非常有价值：绘制、重绘、流动和回流。

非常感谢！！

感谢您来到这里！

我希望您在阅读本文时学到了一些新东西。

下次再见！

参考

构建对象模型

解构网页：页面渲染

以上是了解浏览器中的渲染：DOM 是如何生成的？的详细内容。更多信息请关注PHP中文网其他相关文章！

css html Object Token JS dom
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Can Client-Side Javascript Perform DNS Lookups?下一篇：How to Trigger an ASP.NET Method from a JavaScript Click Event?

相关文章

查看更多