什么是DOM，HTML渲染如何在浏览器中发生？-DEV365 开发者社区

DOM是W3C（万维网联盟）标准。它是平台和语言独立接口标准，允许程序和脚本动态访问和更新文档的内容，结构和样式。

当网页加载时，浏览器会构建页面的DOM树。这样，我们可以更改页面上的所有HTML属性，删除现有的HTML元素和属性，添加新的HTML元素和属性，或使用脚本语言（例如JavaScript）在页面上更改页面上的所有CSS样式。 /p>

什么是DOM树？

dom树是一种树的类型，其节点代表HTML和XML文档的内容。每个HTML或XML文档都有一个唯一的DOM树表示。例如，让我们检查以下代码：

<html>
<head>
  <title>My document</title>
</head>
<body>
  <h1>Header</h1>
  <p>Paragraph</p>
</body>
</html>

上述代码块的DOM树如下：

浏览器如何呈现html？

Web浏览器是一项软件，可从远程服务器下载文件并将其显示给您，从而允许用户交互。从远程服务器下载并向用户展示的文件的过程是由浏览器引擎完成的。如果您有兴趣，可以检查different browser engines and comparisons。

数据通过Internet作为字节数据包发送。浏览器必须将这些数据字节转换为它理解的形式。首先，字节转换为HTML字符，然后转换为令牌。在下一步中，令牌将转换为节点。节点是具有某些属性的不同对象。创建节点后，创建了DOM树。

创建DOM树时，首先创建文档节点。文档是代表整个HTML文档的节点。指定HTML标签的节点称为“元素”。我们可以通过nodeType学习DOM树中任何节点的类型。 NodeType属性返回一个数字。 You can review the relevant document找出该数字代表哪种节点类型。

DOM树已成功创建，但是浏览器需要有关元素如何显示以渲染页面的信息。 CSSOM的责任是了解页面的元素应该如何出现。

什么是CSSOM？

创建DOM树时，请求将发送到

中的CSS链接，并且由于此请求而返回CSS样式。与HTML标签一样，CSS信息包含在字节中，并且CSS对象模型（CSSOM）是通过穿过某些阶段而创建的。

css字节转换为字符，然后转换为令牌和节点；最后，创建了称为 css对象模型或简称CSSOM的树结构。

什么是渲染树？

dom和cssom树结构是两个独立的结构。 DOM包含有关页面HTML元素关系的所有信息，而CSSOM包含有关如何设计元素的信息。

渲染树包含有关页面上所有可见DOM内容的信息以及不同节点的所有必要的CSSOM信息。如果元素被CSS隐藏（例如， display：none ），则表示节点不会在渲染树中表示。

隐藏的元素（例如， display：none ）存在于DOM中，但在渲染树中不存在。这是因为渲染树结合了来自DOM和CSSOM的信息。

当浏览器呈现渲染树时，它首先呈现每个可见节点，从DOM树的根开始（诸如脚本之类的标签，Meta不包含在渲染树中，并且不包括CSS隐藏的节点在渲染树中）。

可见性：隐藏和**显示：无**是不同的。第一个使项目看不见，但是该项目包含在渲染树中（作为空节点），而第二个（显示：无）从渲染树中删除了该项目。

布局和油漆步骤

我们拥有将在屏幕上显示的所有内容和样式信息，并带有渲染树，但图像尚未出现在屏幕上。首先，浏览器必须计算页面上每个对象的确切大小和位置。

要确定每个对象的确切大小和位置，浏览器从渲染树的根部开始，并计算页面上的每个对象。由于该计算，确定每个元素的确切位置和大小。在下一步中，浏览器在屏幕上逐一绘制节点。

资源阻止渲染

dom和cssom必须在绘画之前创建。尽快将HTML和CSS转到客户端，对于优化首次渲染Web应用程序的时间很重要。

即使是简单的网页也可能已经使用了JS。当浏览器在读取脚本时遇到脚本标签时，DOM渲染过程被暂停并停止，直到脚本文件完成为止。这是因为JavaScript可以修改DOM和CSSOM。因为浏览器不确定JavaScript会做什么，所以它可以通过完全停止整个DOM结构来进行预防。

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Örnek</title>
    <link rel="stylesheet" href="style.css">
    **<script src="app.js"></script>**
</head>

<body>
  .....
</body>

</html>

在上面的代码示例中，当浏览器进入脚本标签时，将停止DOM渲染过程，直到脚本文件完成为止。作为一种不同的情况，如果App.js文件是从服务器而不是本地提取的，并且由于网络连接而需要几秒钟来获取App.js，则DOM构建过程也将同时停止。<<<<<<<<<<<<<<<<< /p>

让我们继续使用不同的方案，例如，当浏览器遇到脚本标签时，如果CSSOM尚未准备就绪，JS执行将等到CSSOM准备就绪。

。

默认情况下，每当浏览器遇到脚本标签时，DOM构建过程都会停止。如果将异步关键字添加到脚本标签中，则不会停止DOM渲染，并且在下载脚本文件并准备就绪时将执行。

<!DOCTYPE html>

<html>

<head>

 <meta name=”viewport” content=”width=device-width,initial-scale=1">

 <title>Örnek</title>

 <link rel=”stylesheet” href=”style.css”>

 <script src=”https://random-app.js" async></script>

</head>

<body>

 ....

</body>

</html>