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