javascript - 如何检查哪个资源导致网页加载缓慢

标签 javascript jquery performance google-chrome-devtools html

一个网页加载缓慢,这基本上是因为某些 JavaScript 导致页面加载缓慢。据我了解,如果有任何同步代码需要时间来加载,那么它可能会使加载时间变慢。

我的问题是,如何调查哪个脚本导致了这种情况发生。我熟悉 chrome 网络调试器,但完全不确定如何找到这个脚本。如果我能找到 JS 文件,我如何检查文件中的哪一段代码导致速度变慢?

如果有任何不清楚的地方,请告诉我。

最佳答案

如果您尝试检查页面上的资源以及加载时执行的操作,请打开 Google Chrome 上的开发人员工具 (F12) 并转到“性能”选项卡 >> 单击“记录”并重新加载页面,停止它并查看分割时间方面。

您可以进入审核选项卡并开始新的审核以查看页面的详细性能。

或者,您可以使用 Google Pagespeed 进行测试并获取压缩资源来加速您的网页:https://developers.google.com/speed/pagespeed/insights/

或使用 GTmetrix 选择位置并测试您的页面:https://gtmetrix.com

在 GTmetrix 中,它将帮助您识别页面上每个资源(js、css、图像)所花费的时间,以便您可以找到并修复它。它还提供了修复这些问题的有用信息。

单击“瀑布”选项卡可查看每个文件/资源​​所花费的时间。

关于javascript - 如何检查哪个资源导致网页加载缓慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47616283/

相关文章:

javascript - 在另一个函数之后使用一个 js 函数

javascript - 单击元素的名称属性

c++ - 如何决定是否使用超线程?

performance - Autofac:使用 DynamicProxy 时提高性能的技巧?

c# - 跳点搜索比 XNA 中的常规 A* 慢的 A*?

javascript - 悬停时 HTML 突出显示标签

javascript - 输入数据库中的特定字段时如何生成特定电子邮件的电子邮件触发器

javascript - 根据循环的值打开文件

javascript - 替换/忽略字符串中的 JavaScript

javascript - 用户可以更改 javascript 闭包函数吗?