HTML 解释文档加载的过程

在本文中，您将了解当Web客户机（浏览器）发送请求时，HTML文档加载的流程。这个过程涉及到三个重要的对象，它们分别是：

客户端： 这是发送文档请求的客户端，通常是Web浏览器
服务器： 将文档提供给客户端的服务器
HTTP协议： Web的通信标准
文档加载 是将服务器上的内容传递到客户端并显示给用户的过程。加载通过一系列事件来进行，下面通过一个示例来解释：

假设您正在请求一个示例域，如www.example.com，文档加载中会发生以下事件：

客户端向托管www.example.com的服务器发送请求
服务器响应默认的网页（例如：index.html）
客户端通过HTTP协议接收HTML文档
客户端包含一个HTML解析器，这是一种解析HTML代码的算法
HTML解析器将从服务器接收到的HTML文档转换成一棵称为文档对象模型（DOM Tree）的树
客户端还向文档中的URL发送请求，例如超链接、样式表或JS脚本，加载其他资源
客户端包含一个渲染引擎，用于显示最终的HTML DOM

HTML 解释文档加载的过程

语法：

<html>
    <head>
        <title>Sample</title>
        <link href="style.css"></link>
    </head>
    <body>...</body>
    <script src="script.js"></script>
</html>

考虑语法，当客户端收到包含代码的文件时，它会从标签开始解析代码，同时开始为树创建节点，然后遇到包含样式表名称 style.css 的样式表链接，它向服务器发送CSS文件的请求，然后CSS文件被下载并形成一个专为CSS的树，称为CSSOM，然后进程继续处理HTML文件中的其他标签，最后下载 script.js 文件并将其传递给JS引擎。

文档加载过程中的事件：

一些javascript事件代表了文档的加载过程，通过这些事件我们可以在文档加载时在脚本中执行操作。文档生命周期中有4个重要事件可以通过Javascript访问：

load事件： 当所有资源都加载完成时
domcontentloaded事件： 当DOM树构建完毕，准备创建界面时
unload事件： 文档卸载时
beforeunload事件： 与unload事件相同，但在卸载前需经过用户确认

此外，要了解文档的状态，可以参考 document.readyState 属性，它有3个可能的取值：

loading： 正在加载文档
interactive： 文档已读取，准备显示
complete： 文档已完成且所有其他资源都已加载

下面的两个示例演示了上述事件：

示例1： 在这个示例中，我们将分析所有上述事件的工作原理以及它们执行的顺序。文档调用了引导样式表和脚本。Gif输出显示了使用Chrome浏览器加载的瀑布时间线。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Bootstrap CDN -->
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
        integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h3>Explain the process of document loading.</h3> 
  
    <script> 
        window.onload = () => { 
            console.log("Load Event...") 
        } 
        document.addEventListener("DOMContentLoaded", () => { 
            console.log("DomContentLoaded Event...") 
        }); 
        window.onbeforeunload = () => { 
            console.log("BeforeUnload Event...") 
            return false; 
        } 
        window.onunload = () => { 
            console.log("Unload Event...") 
        } 
    </script> 
</body> 
  
</html>

输出： 这里的输出显示 domcontentloaded 事件在 load 事件之前触发。在页面重新加载时，当您按下 ctrl + R 时， beforeunload 确认用户，而 unload 事件最终会被触发并立即被清除。

HTML 解释文档加载的过程

示例2： 在这个示例中，我们将看到 readyState 属性。它根据文档的状态打印出 document.readyState 的不同值。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>process of document loading</title> 
</head> 
  
<body style="text-align: center;"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h3>Explain the process of document loading.</h3> 
    <script> 
  
        document.addEventListener("readystatechange", () => { 
            console.log(document.readyState); 
        }); 
  
    </script> 
</body> 
  
</html>

输出： 最初下载文档被显示为 交互式 ，然后呈现为 完整。

HTML 解释文档加载的过程