利用DevTools检查网页加载的资源

浏览器的DevTools中的“网络（Network）”面板可帮助确定加载哪些资源以及何时加载。“网络”面板中的每一行都对应一个Web应用程序已加载的URL。本教程基于Chrome的DevTools界面屏幕截图进行说明，其它浏览器也支持类似的功能，但界面会有稍有不同。

DevTools工具使用F12按键开启，推荐使用Chrome、Microsoft Edge、火狐的DevTools。

为什么要了解网页上加载了什么

• 要制定正确的缓存策略，首先要知道加载了哪些静态资源，这些静态文件的体积以及缓存之前的加载速度如何。
• 网页上加载的资源是否都是该网页必须的，是否存在未实际使用但被加载的资源。

DevTools工具查看加载的资源名称和类型

“名称”和“类型”列有助于提供正在加载的内容的有意义的图片，可以清晰的查看正在加载什么。在下面的示例中，共有四个URL，每个URL代表唯一的内容类型。

名称代表浏览器请求的URL，尽管只会看到列出的URL路径的最后一部分（文件名）。例如，如果https://example.com/main.css已加载，最终只会看到main.css。

URL路径的最后几个字符，最后一个小数点后面的部分（例如：”css”），称为URL的扩展名。URL的扩展名通常告诉您所请求的资源类型，并直接映射到“类型”列中显示的信息。例如，v2.html是一个文档，main.css是一个样式表。

Waterfall列可帮助查看加载速度及顺序

从顶部开始，一直向下，每个条的长度表示加载每个资源所花费的总时间。

v2.html加载完成后，对其引用的资源（也称为子资源）的请求即开始。浏览器可以同时请求多个子资源，上图中main.css和logo.svg是同时开始加载的，直至前三个资源加载完成后，才开始加载main.js。