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

Question

我希望监测我们网站的用户体验，并将其与已在服务器端记录的时间信息进行关联。我的假设是需要使用javascript来捕获请求开始时的时间戳（window.onbeforeunload）和加载完成时的时间戳（window.onload）。基本上就像这篇文章所说的 - "测量Web应用响应时间：满足客户端"

1. 是否有更好的方法？
2. 应该期望什么样的性能损耗（数量级）？
3. 结果有多好？

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

- Kam

Answer 1

还有来自雅虎的Boomerang。

它具有一些Jiffy和Episodes中不存在的高级功能。同时支持浏览器中支持的导航计时API（Chrome 6, IE 9）。

- Yasei No Umi

---

Yahoo Boomerang似乎不再处于活跃开发状态。但是在Github上有一个分支，看起来Soasta Boomerang仍在积极开发中。 - surfmuggle

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 navigation timing 的数据，当前（2016年10月）广泛支持导航计时技术。

- Miguel Ping

Answer 3

编辑（2013年）：可以尝试使用Boomerang，就像@yasei-no-umi建议的那样。它正在积极维护。

-- 旧答案 --

我们使用Jiffy。

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

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

- orip

Answer 4

那么使用类似 yslow 这样的东西怎么样？（Firefox 扩展）

- GregD

---

在这种情况下，我对用户在生产中的体验很感兴趣。我的目标是了解系统整体性能，而不仅仅是单个测试运行。yslow给了我们一些很好的建议，但它并不是一个监控解决方案。 - Kam

Answer 5

一个替代 Jiffy 的工具是 Episodes。

两者都需要在JavaScript中添加代码以跟踪各种时间，并将这些时间记录在中央服务器上。

- Pete TerMaat

Answer 6

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

因此，我们有以下时间：

• 页面准备开始
• 页面准备/响应完成
• 客户端在渲染完成时拨打电话

这有助于理解“慢”的客户端（CPU或ISP/带宽）。

附言：没有拨打电话的页面渲染也很有趣-用户点击了关闭（假设该会话中的其他页面渲染都记录了电话回家）。

- Kristen

---

我有点不清楚你是如何开始请求的。这是基于服务器时间戳进行跟踪吗？我也不确定您如何区分渲染完成和图像请求时刻。难道浏览器不是在页面完成渲染之前就获取图像了吗？-Kam - Kam

我认为还有一部分取决于加载顺序，现在有多个浏览器会预先查找文档中的资源，但我不确定它们是否只加载特定类型的资源。 - olliej

抱歉，我表述不够清晰。前两个时间是我们的服务器端应用程序开始和完成准备页面的时间。Phone Home 是客户端浏览器加载我们的虚假图像时的时间。是的，渲染是否完成有主观性，我们使用 OnLoad 事件。我会编辑我的文本。 - Kristen

Answer 7

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

Firefox： Web Developer Toolbar Firebug YSlow

IE： Fiddler

在所有这些工具中，我发现 YSlow 提供关于如何提高加载时间的最佳信息，但 Fiddler 则提供有关您可以在网络上传输什么样的总体信息，并且甚至可以模拟不同的网络速度。

- Terry_Brown

---

哇 - 我因为这个被踩了吗？现在 Stack Overflow 上有些无情的人... :/ - Terry_Brown

你误解了问题。提问者想要监控最终用户的体验。除非你期望最终用户安装YSlow并报告他们的体验，否则这不是一个选项。 - kqr

Answer 8

我对这些方法非常怀疑。其中一些方法比必要的更复杂，我质疑这些数据的准确性。我的做法是让测试人员去各种网络并使用类似Firebug之类的工具：

http://getfirebug.com/

仅仅为了好玩，这里有一篇最近提交给SOSP的有趣论文，介绍了一个名为AjaxScope的工具。有趣的是，这是由微软研究部门呈现的学术文章，其中展示了Firefox的Javascript实现在某些情况下比Internet Explorer表现出更高的性能。 :)

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

- BobbyShaftoe

---

我并不反对复杂性，但我们也在实时网站上记录这些数据，然后报告它随时间的变化情况（而不仅仅是点检）。这可以显示出速度变慢的页面（例如，数据库需要优化）。 - Kristen

@Kristen：是的，这可能行得通。我只是有点不安。 :) 你可能会对微软研究部门最近提交给 SOSP 的 AjaxScope 论文感兴趣。http://research.microsoft.com/en-us/groups/rad/sosp07.pdf - BobbyShaftoe

我会让测试人员前往各种网络并使用类似Firebug之类的工具。- 如果您有全球分布的用户，这种方法将行不通。您会派遣多少个测试人员去“网络”？ - talonx