浏览器的 DevTools 中的“Network”（网络）面板有助于确定加载了哪些资源以及何时加载这些资源。“网络”面板中的每一行都对应于您的 Web 应用加载的特定网址。
了解您加载的内容
若要为 Web 应用制定合适的缓存策略，您需要了解自己要加载的确切内容。在构建可靠的 Web 应用时，网络可能会受到各种黑暗势力的威胁。如果您希望在应用中应对网络漏洞，则需要了解网络的漏洞。
您可能认为自己已经非常了解 Web 应用会加载的内容。如果您只使用少量静态 HTML、JavaScript、CSS 和图片文件，这种情况就可能成立。但是，一旦您开始使用动态 API 请求和服务器生成的响应，混合使用托管在内容分发网络上的第三方资源，情况很快就会变得更加复杂。
例如，适用于几个小型 CSS 文件的缓存策略可能不适用于数百个大型图片。
了解何时加载
整体加载画面的另一部分是何时加载所有内容。
用户访问给定网址后，系统会立即无条件发出对网络的一些请求，例如对初始 HTML 的导航请求。该 HTML 可能包含对关键 CSS 或 JavaScript 文件的硬编码引用，这些文件也必须加载才能显示您的互动页面。这些请求都位于关键加载路径中。您需要积极缓存这些数据，以确保快速可靠。
其他资源（例如 API 请求或延迟加载的资源）可能要等到所有初始加载完成很久之后才会开始加载。如果这些请求仅在用户互动发生特定顺序后才会发生，那么在多次访问同一网页时，最终可能会请求完全不同的一组资源。对于您已确定不在关键加载路径之外的内容，通常适合采用不那么激进的缓存策略。
“名称”和“类型”列可帮助您了解
“名称”和“类型”列有助于您全面了解正在加载的内容。在上述示例中，“正在加载什么内容？”的答案总共有 4 个网址，每个网址代表一种独特的内容类型。
“名称”代表浏览器请求的网址，但您只会看到网址路径的最后一部分。例如，如果加载了 https://example.com/main.css，您最终只会在“名称”下看到 main.css。
网址路径中最后几个字符（例如“css”）称为网址的扩展名。网址的扩展名通常会告知您请求的是哪种类型的资源，并直接映射到“类型”列中显示的信息。例如，v2.html 是文档，main.css 是样式表。
“广告瀑布流”列有助于了解
从上到下查看“广告瀑布流”列。每个条柱的长度表示加载每个资源所花费的总时间。如何区分在关键加载路径中发出的请求与在网页初始加载完成很久后动态发出的请求？
广告瀑布流中的第一个请求始终是对 HTML 文档的请求，例如 v2.html。所有后续请求都将从此初始导航请求流出（就像瀑布流一样！），具体取决于 HTML 文档引用的图片、脚本和样式。
瀑布图显示，v2.html 加载完毕后，系统会立即开始请求其引用的资源（也称为子资源）。浏览器可以同时请求多个子资源，这在“广告瀑布流”列中会显示为 main.css 和 logo.svg 的条形重叠。最后，您可以从屏幕截图中看到，main.js 是最后开始加载的，并且在其他三个网址也完成加载后才完成加载。