Javascript 测量客户端页面加载时间的最佳方法是什么？

我希望监控我们网站的最终用户体验，并将其与服务器端已登录的计时信息链接。我的假设是，这需要javascript在请求开始时（window.onbeforeuload）和加载结束时（window.onload）捕获时间戳。基本上是这样--“

有更好的方法吗

我应该期望什么样的性能惩罚（数量级）

结果如何

我们在页面中有一个“回调”（1x1透明GIF图像，带有表示页面呈现ID的参数），该页面将“查看的页面”记录到数据库中。也就是说，记录的ID与记录的页面本身的ID相同，渲染完成时，我们有一个日志条目

因此，我们有时间：

• 页面准备已开始
• 页面准备/响应完成
• 渲染完成时，客户端打电话回家

帮助理解“慢”的客户端（CPU或ISP/带宽）

---

另外，不呼叫总部的页面呈现也很有趣-用户单击关闭（假设该会话中的其他页面呈现确实记录了电话总部）

使用类似（firefox扩展）的东西怎么样？

我对这些方法相当怀疑。其中一些方法比必要的更复杂，我质疑这些数据的准确性。我要做的是让测试人员进入各种网络，使用Firebug之类的东西：

见鬼；下面是最近提交给SOSP的一篇关于AjaxScope工具的有趣文章。有趣的是，这是一篇由微软研究院（MS Research）发表的学术文章，其中显示Firefox的Javascript实现在某些情况下的性能比Internet Explorer好很多倍

编辑（2013）：试试看，就像@yasei no-umi建议的那样。它得到了积极的维护

--旧答案--

我们使用

它的使用和修改非常简单——我们编写了自己的服务器端代码（而不是Jiffy的Apache+perl），并使用了Jiffy的JS

---

关于性能惩罚-客户端没有。JS本身的速度非常快，在页面加载后可以使用XHR向服务器报告，这对用户体验没有任何影响。在服务器端，您将收到两倍的请求。如果这是一个瓶颈，您可以为定时响应设置不同的服务器。

我们倾向于使用以下组合：

火狐：

即：

在所有这些信息中，我发现YSlow提供了关于如何改进加载时间的最佳信息，而Fiddler提供了关于您可以通过网络期望的最佳总体信息，甚至可以模拟不同的网络速度。

is的替代方案

这两种方法都涉及检测Javascript以跟踪各种计时，并将这些计时记录在中央服务器上。

雅虎也有类似的方法

---

有一些在Jiffy和剧集中不存在的高级功能。在支持它的浏览器中也支持API（Chrome 6，IE 9）

为了完整起见，您现在可以在一些现代浏览器中使用导航计时API：

第三方编辑

---

基于今天（2016年10月）得到广泛支持的数据，我并不反对w/r的复杂性，但我们也会在现场网站上记录这些数据，然后报告数据随时间的变化（而不仅仅是抽查）。这会显示速度变慢的页面（例如数据库需要优化）@Kristen:是的，它可能会工作。我只是有点不安您可能对MS Research最近提交给SOSP的关于AjaxScope的论文感兴趣。“我要做的是让测试人员去不同的网络，使用Firebug之类的东西”——如果你有全球分布的用户，这是行不通的。您将向多少“网络”发送测试人员？我有点不清楚您是如何开始请求的。这是基于服务器时间戳跟踪的吗？我也不确定如何区分渲染完成和请求图像的时间。浏览器不在页面完成渲染之前获取图像吗-还有一个因素取决于加载顺序，我相信现在多个浏览器都希望通过文档提前找到类似资源的东西——我不确定它们是否只加载特定的资源类型。对不起，我不是很清楚。前两个时间是服务器端应用程序启动和完成页面准备的时间。当客户端浏览器加载我们的假图像时，即为呼叫总部。是的，由于渲染是否完成是主观的，所以我们使用OnLoad事件。我将编辑我的文本在这种情况下，我对用户在生产中的体验感兴趣。我的目标是了解系统范围的性能，而不仅仅是单个测试运行。yslow给了我们一些很好的建议，只是它不是一个监控解决方案。哇-我被否决了？一些无情的人现在就这样…：/你误解了这个问题。询问者希望监控最终用户体验。除非你期望最终用户安装YSlow并报告他们的体验，否则这不是一个选项。雅虎的回力棒似乎不再处于积极开发之中。但github有一个分支，它似乎仍在积极开发中。

function onLoad() { 
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}