31

有没有办法检查页面加载需要多长时间？

编辑：

我会稍微扩展一下这个问题。假设您正在处理一个 ASP.NET 项目，并且当您在 Visual Studio 中运行您的项目时，您需要一些加载时间才能看到您的起始页面呈现在屏幕上并准备好使用。

如果此网站已上线，则加载时间应该与从 Visual Studio 启动项目时的加载时间不同。

我想看到的是，如果网站在服务器上，实际加载时间是多少。

编辑2：回答

Chrome -> 右键单击​​ -> 检查元素 -> 网络选项卡。当你加载一个页面时，会有一个很好的页面时间轴报告，显示实际页面加载时间、css、js 等加载时间。在 Mozilla 的 Net 选项卡下有一个类似的工具。

4

5 回答 5

17

至于 Firefox，操作员已经回答了他自己的问题（菜单 - Web 开发人员 - 网络或 Ctrl + Shift + K - 网络或 Ctrl + Shift + Q），但我想提一下“app.telemetry Page Speed Monitor " 插件，它不需要您先打开 Web 控制台。它只会在状态栏中以毫秒为单位显示加载时间（单击它时甚至会显示详细信息）。
https://addons.mozilla.org/en-US/firefox/addon/apptelemetry/
唯一的缺点似乎是 Facebook/Twitter 按钮。

至于 Chrome/Chromium，我赞同 Andy Davies 的建议，页面加载时间插件很棒，它在位置栏旁边显示加载时间，还提供了详细信息。

于 2014-03-03T10:47:47.147 回答
7

另请注意，您现在可以通过window.performance对象（Chrome、Firefox 和 IE9+）通过 javascript 获取此信息。

试试这个：

window.onload = function(){
  setTimeout(function(){
    var t = performance.timing;
    console.log(t.loadEventEnd - t.responseEnd);
  }, 0);
}

更多信息在这里： http ://www.html5rocks.com/en/tutorials/webperformance/basics/

于 2014-03-10T18:28:18.853 回答
4

正如@nick-rtz 那样，我使用webpagetest 进行认真的测试，如果您想快速查看加载时间并且不想使用开发人员，那么这个Chrome 扩展工具将有所帮助 - https://chrome.google.com/webstore /详细信息/页面加载时间/fploionmjgeclbkemipmkogoaohcdbig

于 2013-06-12T19:37:33.080 回答
2

我使用这个工具：http ://www.webpagetest.org/ 但它适用于实时站点。如果您想对不代表实际使用情况的本地文件进行基准测试，但您可能想测量渲染时间而不仅仅是传输时间。请注意，加载时间取决于用户相对于服务器在地球上的地理位置。

于 2013-06-12T06:45:22.370 回答
-1

对于实时站点的加载时间，我还将研究真实用户监控（又名 RUM），以从生产中的真实用户那里获取性能数据。您可以使用 Boomerang 和 Bucky 等开源项目自己完成这项工作，也可以与供应商合作。数据是无价的！@vikramvi 提到的工具可帮助您跟踪开发/测试中的页面性能，并有助于防止开发周期早期的性能回归。

于 2018-01-05T06:57:41.217 回答