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