HTML页面的加载顺序？答案

【问题标题】：Sequence in which HTML page loads?HTML页面的加载顺序？
【发布时间】：2017-12-08 22:35:57
【问题描述】：

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>

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

head 部分首先加载。然后加载正文部分。

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

【问题讨论】：

Chrome Canary (v42) 为页面加载提供了一些简洁的新可视化。尽管您得到了任何答案，但您可能希望在那里启动开发人员工具 > 网络选项卡，查看哪些是并行加载的，哪些是为您自己的站点按顺序加载的。您还可以查看您的 TLS 协商是否花费了异常长的时间和其他有趣的东西。
我同意@AdamHart 的观点，我还建议您查看开发工具中的 timeline 选项卡，从渲染的角度获得更深入的图片
developers.google.com/web/fundamentals/performance/… 和 frontendbabel.info/articles/webpage-rendering-101 绝对是寻找这个的好地方。

标签： javascript html css

【解决方案1】：

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

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

未标记为defer 或async 的脚本标记处于阻塞状态，它们必须加载并执行，然后才能继续解析页面的其余部分。

只有在加载头部后才开始加载正文部分完全吗？

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

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

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

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

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

由于 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> 标记。浏览器向服务器发起对外部脚本文件的请求。
浏览器可以“前瞻”并查看下一个<script> 标记，并启动对该外部脚本文件的请求。
由于外部<script>资源是阻塞资源，所以在获取并执行第一个脚本文件之前，无法继续官方页面解析和执行。浏览器可能会提前查看是否应该启动任何其他资源的下载。
第一个脚本文件完成下载。浏览器执行该脚本。
第二个脚本文件完成下载。浏览器执行该脚本。
在此过程中的任何时候，如果任一样式表完成下载，则会尽快处理它们。
处理完第二个块脚本文件后，可以继续页面解析。
解析</head> 和<body> 标签。
<button>button1</button> 被解析并添加到正文 DOM。此时浏览器可能会进行部分渲染。
<img> 两个标签都被解析并开始提取它们的外部图像。
第二个<button> 标记已处理并可呈现。
浏览器会看到表示页面结束的结束标记。
在未来的某个时候，图像完成下载并完成渲染。根据图像和浏览器的不同，图像在下载时可能一直在进行渐进式渲染。

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

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

作为另一个资源，this answer load and execute order of scripts 包含有关下载脚本的方式/时间的详细说明，并包含 async 和 defer 属性的效果。

【讨论】：

@nikhilrao - 这回答了你的问题吗？由于看起来您可能是 StackOverflow 的新手，您是否知道如果您的问题得到了回答，那么您应该选择最佳答案并单击答案左侧的绿色复选标记。这将通知社区您的问题已得到回答，并为您和提供答案的人赢得一些声誉积分。
关于您的第 9 步：处理新下载的 CSS 是否需要重新布局？如果是这样，任何读取特定于布局的 DOM 属性的 JS 代码可能会根据相关 CSS 加载速度快还是慢而表现不同，从而使页面行为不可预测？
@max - 任何依赖于所有正在加载的样式表和其他可能影响渲染的页面资源的 JS 应该稍后在 load 事件或在某些情况下在 DOMContentLoaded 事件上运行。跨度>
@jfriend00 我发现这个答案真的很有帮助。谢谢

【解决方案2】：

HTML 文档形成树层次结构是有原因的，浏览器（渲染引擎）会在找到元素时遍历树解析和附加元素，然后遍历到下一层。

因此 HTML 页面是自上而下绘制的：

Draw:
=========

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

【讨论】：

【解决方案3】：

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

确实，HTTP 请求的标头首先被读取，然后正文被读取，但它们都在一个 HTTP 响应中接收。

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

现在，回答您的问题：

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

【讨论】：