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

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

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

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

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

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

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

Chrome DevTools示例
Chrome DevTools示例

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

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

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

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

Chrome DevTools的waterfall列
Chrome DevTools的waterfall列

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

留下评论