Question

HTML页面加载的顺序是什么。请参阅下面的基本HTML大纲 -

<html>
<head>
    <link rel="stylesheet" href="css/sheet1.css">
    <link rel="stylesheet" href="css/sheet2.css"
    <script src="scripts/take1.js"></script>
    <script src="scripts/take2.js"></script>
<head>
<body>
<button>button1</button>
<img src = "HQ1.jpg" />
<img src = "HQ2.jpg" />
<button>button2</button>
</body>
</html>

我所知道的 - （如果我不对，请纠正我）

首先加载头部。然后是身体部分负荷。

我的问题 -
1.一旦头部完全装入，车身部分是否开始加载？ 2. css sheet1是否完全加载，然后只有sheet2和JS文件开始加载？
3. CSS文件并行加载吗？与JS文件相同..？或者CSS和JS文件并行加载？ 4.由于HQ *图像是大文件，因此加载需要时间。只有HQ1和HQ2完全加载后，button2才会加载并显示在页面中？ 5. HQ1和HQ2的下载是并行发生的，还是同步的，首先是HQ1然后是HQ2？

Answer 1

从头到尾依次解析HTML页面。当遇到诸如样式表，图像或脚本之类的资源时，浏览器会触发对这些资源的并行请求。

图片和样式表不被视为阻止资源，这意味着在获取这些资源时，页面其余部分的解析可以继续。

未标记为defer或async的脚本标记是阻止的，必须在继续解析其余页面之前加载并执行它们。

只有在加载头部分后才开始加载主体部分完全？

是。但它不一定等待<head>标记中指定的所有资源。它可能会在获取所有<body>资源之前开始解析<head>。但是，<head>部分中的所有标记在开始解析<body>部分之前都会被解析。

css sheet1是否完全加载，然后只加载sheet2和JS文件开始加载？

没有。样式表是并行加载的，页面不会阻止进一步解析等待样式表加载。

CSS文件并行加载吗？与JS文件相同..？还是CSS和 JS文件并行加载？

CSS文件并行加载。可以并行获取多个脚本文件，但是在获取并执行脚本文件之前不会进行进一步的解析（除非它具有async或defer属性）。作为性能优化，浏览器可以“超前”＃34;在页面中的其他资源，可以并行获取它们。例如，可以并行获取多个脚本文件，即使它们的执行必须是串行的。

由于HQ *图像是大文件，因此加载需要时间。按钮2 仅在HQ1和HQ2完全加载后加载并显示在页面中？

不，图像是异步加载的，不会阻止加载其余页面或HTML标记。

HQ1和HQ2的下载是否并行发生，或者是它同步，先是HQ1，然后是HQ2？

图像并行加载到一个点。浏览器具有某些连接限制，并且一次只能从同一服务器并行加载最多N个资源。在您的简单网页中，HQ1和HQ2可能会并行加载 - 尽管这取决于浏览器实现，而不是规范中的内容。

加载HTML页面的顺序是什么

因此，在您的示例HTML页面中：

<html>
<head>

    <link rel="stylesheet" href="css/sheet1.css">
    <link rel="stylesheet" href="css/sheet2.css">

    <script src="scripts/take1.js"></script>
    <script src="scripts/take2.js"></script>

</head>
<body>

    <button>button1</button>
    <img src = "HQ1.jpg" />
    <img src = "HQ2.jpg" />
    <button>button2</button>

</body>
</html>

这是一系列操作：

浏览器会解析<html>和<head>标记。
浏览器遇到第一个<link>标记，看到对外部样式表的引用，并启动服务器请求以下载该外部样式表。浏览器不会等待该请求完成。
浏览器遇到第二个<link>标记，看到对外部样式表的引用，并启动服务器请求以下载第二个外部样式表。浏览器不会等待该请求完成。
浏览器遇到指定外部脚本文件的第一个<script>标记。浏览器从服务器发起外部脚本文件的请求。
浏览器可以＆＃34;预测＆＃34;并查看下一个<script>标记，并启动该外部脚本文件的请求。
由于外部<script>资源阻塞资源，因此在获取并执行第一个脚本文件之前，官方页面解析和执行无法继续。浏览器可以预先查看是否应该启动任何其他资源的下载。
第一个脚本文件完成下载。浏览器执行该脚本。
第二个脚本文件完成下载。浏览器执行该脚本。
如果任一样式表完成下载，则在此过程中的任何时候，都会尽快处理它们。
处理完第二个块脚本文件后，页面解析可以继续。
</head>和<body>标记已解析。
<button>button1</button>被解析并添加到正文DOM中。此时浏览器可能会进行部分渲染。
解析两个<img>标记并启动其外部图像的提取。
处理第二个<button>标记，可以进行渲染。
浏览器会看到表示页面末尾的结束标记。
在未来的某个时刻，图像完成下载和渲染完成。根据图像和浏览器的不同，图像可能在下载时进行渐进式渲染。

正如其他人所提到的，Chrome开发者工具中“网络”标签的时间轴部分可以是一个非常有效的可视化工具，可以向您展示各种页面组件的下载方式。

要说明Chrome开发者工具的“网络”标签中的信息类型，请参阅加载StackOverflow页面的屏幕截图。右侧的条形图显示了首次请求各种资源以及何时完成下载的时间表。

enter image description here

作为另一种资源，this answer load and execute order of scripts包含脚本下载方式/时间的详细说明，并包含异步和延迟属性的效果。

Answer 2

为什么HTML文档是在树形结构中形成的，浏览器（渲染引擎）将遍历树解析并在找到它们时追加元素，然后遍历到下一层。

因此从上到下绘制了一个HTML页面：

Draw:
=========

-- <html>               
|      <head>
|          ...
|      </head>
|      <body>
|          <div>...</div>
|      </body>
-- </html>

Answer 3

为了清楚起见，我们不要将HTML页面的标题/正文与HTTP请求的标题/正文混淆。

确实首先读取了HTTP请求的标头，然后是第二个正文，但是在一个HTTP响应中都收到了它。

同样，HTTP响应包含整个HTML页面（带标题/正文标记）。

现在，问题是：

浏览器从上到下逐行读取HTML页面（第一行到最后一行）。当浏览器正在读取（也就是解析）HTML页面时，它确定它需要其他资源（即CSS，JS，JPG，GIF文件等），并且浏览器发出额外的请求以获取这些资源。除非另有说明，否则它会并行执行。

HTML页面加载的顺序？

3 个答案: