Google Chrome 或 Mozilla Firefox 中的页面加载时间答案

【问题标题】：Page load time in Google Chrome or Mozilla FirefoxGoogle Chrome 或 Mozilla Firefox 中的页面加载时间
【发布时间】：2013-06-08 04:28:26
【问题描述】：

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

编辑：

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

如果此网站处于活动状态，则加载时间应该与从 Visual Studio 启动项目时的加载时间不同。

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

编辑 2：回答

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

【问题讨论】：

为什么不试试 Firebug？检查getfirebug.com/network 是最好的 Firebug，可用 chrome 和 firefox。
你也可以使用godaddy的库github.com/godaddy/timings

标签： google-chrome mozilla page-load-time

【解决方案1】：

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

【讨论】：

不错的网站，但不是我想要的:)

【解决方案2】：

正如@nick-rtz 一样，我使用webpagetest 进行严肃的测试，如果您想快速查看加载时间并且不想使用开发工具，这个Chrome 扩展工具会有所帮助-https://chrome.google.com/webstore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig

【讨论】：

【解决方案3】：

至于 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 的建议，Page load time plugin 很棒，它在地址栏旁边显示加载时间，还提供了详细信息。

【讨论】：

【解决方案4】：

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

试试这个：

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

【讨论】：

【解决方案5】：

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

【讨论】：