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

Question

有没有一种方法可以检查页面加载需要多长时间？

编辑：

我想稍微扩展一下这个问题。假设你正在开发一个ASP.NET项目，当你在Visual Studio中运行你的项目时，在屏幕上呈现你的起始页面并准备使用之前会有一些加载时间。

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

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

编辑2：答案

Chrome -> 右键单击 -> 检查元素 -> 网络标签页。当您加载一个页面时，会显示页面时间轴的详细报告，显示实际页面加载时间，CSS、JS等加载时间。Mozilla浏览器中也有类似的工具，位于Net标签下。

- Anton Belev

---

为什么不试试Firebug呢？请访问http://getfirebug.com/network，这是最好的Firebug版本，可在Chrome和Firefox上使用。 - KingRider

你也可以使用Godaddy的库https://github.com/godaddy/timings。 - vikramvi

Answer 1

关于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插件非常棒，它可以在位置栏旁边显示加载时间，并提供了详细信息。

- basic6

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/

- lambinator

Answer 3

像@nick-rtz一样，我会使用webpagetest进行严格测试。如果你想快速查看加载时间，而不想使用开发工具，这个Chrome扩展程序可以帮助你 - https://chrome.google.com/webstore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig

- Andy Davies

Answer 4

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

- Niklas Rosencrantz

---

不错的网站，但不完全是我想要的：） - Anton Belev

Answer 5

对于已经上线的网站的加载时间，我还会考虑使用真实用户监测（Real User Monitoring，简称RUM）来获取生产环境中真实用户的性能数据。您可以使用像Boomerang和Bucky这样的开源项目自己完成，也可以选择供应商。这些数据是非常宝贵的！ @vikramvi提到的工具可以帮助您跟踪开发/测试中的页面性能，并在开发周期早期防止性能回归问题。

- mverkerk