Google Chrome或Mozilla Firefox中的网页加载时间

Question

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

编辑：

我会稍微提出一下这个问题。假设您正在开发一个ASP.NET项目，当您在Visual Studio中运行项目时，会有一些加载时间，然后您才能看到在屏幕上呈现的起始页面并准备好使用。

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

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

编辑2：回答

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

Answer 1

至于Firefox，op已经回答了他自己的问题（菜单 - 网络开发者 - 网络或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非常棒，它显示了位置栏旁边的加载时间，它还提供了详细信息。

Answer 2

另请注意，您现在可以通过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/

Answer 3

作为@ nick-rtz，我使用网页测试进行严肃测试，如果您想快速了解加载时间并且不想使用开发工具，Chrome扩展程序会提供帮助 - https://chrome.google.com/webstore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig

Answer 4

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

Answer 5

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