如何检查哪个资源使网页加载缓慢答案

【问题标题】：How to check which resource is making webpage load slowly如何检查哪个资源使网页加载缓慢
【发布时间】：2018-05-16 21:50:51
【问题描述】：

一个网页加载缓慢，这主要是因为某些 javascript 导致页面加载缓慢。我知道，如果有任何同步代码需要时间加载，那么它可能会使加载时间变慢。

我的问题是，我该如何调查导致这种情况发生的脚本。我熟悉 chrome 网络调试器，但完全不知道如何找出这个脚本。如果我能查出这个JS文件，我该如何检查文件中的哪一段代码让它变慢了？

如果有什么不清楚的地方请告诉我。

【问题讨论】：

【解决方案1】：

如果您尝试使用加载时执行的操作检查页面上的资源，请在 Google Chrome(F12) 上打开开发人员工具并转到性能选项卡>>单击记录并重新加载页面，停止它并查看故障时间明智。

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

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

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

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

点击瀑布标签查看每个文件/资源所花费的时间。

【讨论】：

谢谢，如何检查 javascript 文件中的哪些代码 sn-p 需要时间加载？因为 JS 文件有许多单独的代码块，其中一些还请求 3rd 方资源。
在 js 文件中找到需要更多执行时间的确切代码 sn-p 或函数的最佳方法是使用 javascript 计时器，或者您可以使用 Chrome devTool 方法，如 console.time() 和console.timeEnd().
const 迭代次数 = 1000; console.time('功能 1'); for(const i=0; i
谢谢，但如果我们无权访问网站代码，我们该如何调查。如何从chrome dev tools端找出来（而不是从webserver打开具体的js文件）
显然一个更大的 js 文件需要更多时间，并且它还调用了其他几个 js 文件，所以在网络调试器中，当我按时间排序时，我能够看到所有这些 js 文件（从主文件中调用）。