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

本课目标：

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

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

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

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

讲解

文档请求

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

子资源

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

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

它们的分量并不相等。把 HTML、CSS、JavaScript 变成屏幕上的像素，是一段有定义的步骤序列，叫关键渲染路径；样式表就站在这条路径上：浏览器不会先把文字画出来，然后过一会儿再重新排版一遍²。而页面下方的一张图片，并不会以同样的方式拖住首次绘制。所以列表里一根慢的横条不等于一个慢的页面——关键是这一条是否落在通往首次绘制的路径上。

瀑布图

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

读瀑布图要同时读两件事：横条的长度，也就是这条请求花了多久；以及横条的起点，也就是它什么时候才被允许开始。一根很短却起得很晚的横条，说明的不是服务器慢，而是一个依赖：浏览器在解析到提及这个文件的那段 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 开头时该怎么解读。

Footnotes

1. MDN: Overview of HTTP — https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Overview ↩

2. MDN: Critical rendering path — https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Critical_rendering_path ↩

3. Chrome DevTools: Network panel overview — https://developer.chrome.com/docs/devtools/network/overview ↩ ↩²