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

Question

我希望监控我们网站的最终用户体验，并将其与服务器端已记录的计时信息链接起来。 我的假设是，这将需要 javascript 在请求开始时 (window.onbeforeunload) 和加载结束时 (window.onload) 捕获时间戳。 基本上是这样的 - “测量 Web 应用程序响应时间：与客户见面”

1. 有更好的方法吗？
2. 我应该期待什么样的性能损失（数量级）？
3. 结果有多好？

Answer 1

还有雅虎的 Boomerang。

具有 Jiffy 和 Episodes 中不存在的一些高级功能。 还支持在支持 NavigationTiming API 的浏览器 (Chrome) 6、IE 9)

Answer 2

为了完整起见，您现在可以在某些现代浏览器中使用导航计时 API：https://developer.mozilla.org/en-US/docs/Navigation_timing

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);
}

第三方编辑

基于caniuse.com 导航计时 今天得到广泛支持 (10/2016)

Answer 3

编辑（2013）：尝试使用 Boomerang 代替，就像 @yasei-no-umi 建议的那样。 它得到积极维护。

-- 旧答案 --

我们使用 Jiffy。

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

关于性能损失——客户端没有。 JS 本身速度非常快，并且可以在页面加载后使用 XHR 完成向服务器的报告，这不会影响用户体验。 在服务器端，您将收到两倍的请求。 如果这是一个瓶颈，您可以设置一个不同的服务器来专门用于计时响应。

Answer 4

使用 yslow （火狐扩展）之类的东西怎么样？

Answer 5

Jiffy 的替代方案是 剧集。

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

Answer 6

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

因此，我们有以下时间：

• 页面准备开始
• 页面准备/响应完成
• 渲染完成后客户端回拨

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

PS 不回拨的页面渲染也很有趣 -用户单击关闭（假设该会话中呈现的其他页面确实记录了 Phone Home）

Answer 7

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

http://getfirebug.com/< /a>

管它呢； 这是最近提交给 SOSP 的一篇关于名为 AjaxScope 的工具的有趣论文。 有趣的是，这是一篇由 MS Research 发表的学术文章，其中显示 Firefox 的 Javascript 实现在某些情况下比 Internet Explorer 的性能好很多倍。 :)

http://research.microsoft.com/en-us/组/rad/sosp07.pdf

Answer 8

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

Firefox：
Web 开发者工具栏
Firebug
YSlow

IE：
Fiddler

在所有这些中，我发现 YSlow 提供了有关您可以做什么的最佳信息来缩短加载时间，但 Fiddler 可以提供有关您可以通过网络期待的最佳整体信息，甚至可以模拟不同的网络速度。