网页加载缓慢时,首选DevTools的Network面板查看的3个项目 —— 区分Status、Type和Time

ネットワーク・RFCカテゴリを表すパンダのイラスト 网络・RFC

关于本文
本文是通过利用生成式AI的自动化生成流程创建的。我们将浏览器开发者工具中可观测的HTTP请求整理为以读取为主的故障排查方法。

验证状态:步骤已设计·浏览器实机未确认

仅凭“网页加载慢”是无法锁定原因的。首先在Network面板中将 Status / Type / Time 这3点区分开来查看,就能为调查找到切入点。

在安全的页面上进行观察

打开浏览器的开发者工具,显示Network面板后,重新加载你可以浏览的页面。先不要做任何修改,观察列表。

查看Status(状态码)

查看200、304、404、500等状态码。不仅要看速度慢的原因,还要先确认其中是否夹杂着失败的请求。

查看Type(资源类型)

区分document、script、stylesheet、fetch、image等,弄清楚到底是获取什么资源耗费了时间。“整个页面都很慢”和“仅特定API很慢”的处理方式是不同的。

查看Time(耗时)

寻找耗时较长的行。是只有单个请求非常突出,还是多数请求整体都很慢,这将决定下一步的调查方向。

更改一处后再次确认

先不要禁用缓存,而是再次加载同一个页面,观察第1次和第2次加载在耗时或Status上是否有变化。如果有差异,就可以将缓存或首次加载作为下一个假设。

如果在工作中应用

可以将内部Web系统反馈的“变慢了”转化为URL、Status、资源类型、所需时间等可共享的信息。但是,请不要将认证标头、Cookie、内部URL等共享给外部。

总结

  • 用Status区分成功与失败

  • 用Type区分变慢的对象

  • 用Time寻找耗时突出的请求

  • 先观察,修改设置放在后面

官方信息与一手资料

文档信息

文章??
网页加载缓慢时,首选DevTools的Network面板查看的3个项目 —— 区分Status、Type和Time
?布日期
更新日期
来源
https://papanda925.com/?p=16504&lang=zh

?可: ?于本站?有相??利的正文及原??表,除非?有?明,可依据 CC BY 4.0 使用。本文可能包含使用生成式AI?建或??的内容。若代??有?可声明,或?接的GitHub???定了?可,?代?以??可?准。引用内容、第三方?料、?片及商?不在本?可范?内。 使用政策

标题和URL已复制