第 5 课：一次真实的页面加载：从文档请求到瀑布图

本课目标：

• 在 Network 面板日志中识别文档请求。
• 区分文档请求和子资源。
• 解释页面加载的基本顺序。

上一篇 << 4 | 下一篇 6 >>

一张网页是一组下载，不是一次下载

加载页面时，第一条请求要的是主 HTML 文档。浏览器读完这份文档，发现自己还需要更多东西：样式表、图片、字体、脚本。它们每一个都会变成又一条 HTTP 请求。这些额外的请求叫子资源¹。

讲解

文档请求

第一条请求是文档请求。它在 Network 面板里的 Type 通常是 document，Name 往往是域名或 index.html。它的响应体就是 HTML 页面本身。

子资源

其余的都是子资源。浏览器要拿到足够多的子资源才能完成页面渲染。常见的子资源类型有：

• stylesheet：控制布局和颜色的 CSS 文件。
• script：JavaScript 文件。
• image：图片。
• font：字体。

瀑布图

Network 面板有一个瀑布图列：每条请求一根横条，显示它何时开始、花了多久。文档请求最先开始；子资源要等浏览器解析了足够多的 HTML、知道需要它们之后才开始²。

这张图表达的重点是：文档请求先把门打开，子资源随后跟进。

完整示例（跟着做）

1. 打开 DevTools 和 Network 面板。
2. 访问 https://example.com。
3. 看第一行。它应该是文档请求，Type 为 document，Status 为 200。
4. 再看接下来的几行。如果页面有图片或样式表，你会看到 Type 为 image、stylesheet 或 script 的行。
5. 把鼠标悬停在瀑布图的横条上。第一根横条从最左边开始；其余横条都晚一点才开始。

你来试试（填空示例）

在 Network 面板日志里，怎么把主文档请求和子资源区分开？

答案：文档请求的 Type 是 document，通常排在列表最上面；子资源的 Type 是 image、script、stylesheet 这类。

小结 + 下一步

一次页面加载从一条文档请求开始，然后浏览器解析 HTML、请求子资源。瀑布图显示时间线。下一课讲状态码不以 2 开头时该怎么解读。