window.performance JavaScript的解释

Question

我正在尝试检测连接速度，所以我计划使用window.performance对象进行持续时间计算。

我有点困惑于 window.performance.timing 对象是基于整个页面加载还是基于最后一次请求和响应生成的。

例如：

我有5个服务器调用用于网页加载，performance.timing 对象是基于所有5个服务器调用生成的，还是基于第5个服务器调用（即最后一个调用）生成的。

参考样本连接速度计算

 var bitsLoaded = 100000; //bits total size of all files (5 server call).
 var duration = performance.timing.responseEnd - performance.timing.navigationStart;
 var speedBps = Math.round(bitsLoaded / duration);
 var speedKbps = (speedBps / 1024).toFixed(2);
 var speedMbps = (speedKbps / 1024).toFixed(2); 

有什么不清楚的需要解释

你知道window.performance是什么吗？

- karthick

Answer 1

这张图或许能更好地帮助您理解performance.timing。

关于您的问题：

我有5个服务器调用网页加载，performance.timing对象是基于所有5个服务器调用还是基于第5个服务器调用（最后一个）生成的？

答案是：performance.timing是基于所有请求和响应（但不包括ajax请求）生成的。

对于您提供的样例连接速度计算脚本，我认为下面的脚本更好。

var duration = performance.timing.responseEnd - performance.timing.responseStart;

原因是：navigationStart到responseEnd的时间包括DNS时间，该时间不会将任何数据从服务器传输到客户端。

请参考https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html获取时序的定义。

- Calvin Zhang

---

请注意，performance.timing.responseEnd - performance.timing.responseStart; 只会测量根文档（例如 HTML）从服务器发送所需的时间，而不是 Karthick 提到的 5 次服务器调用和 100000 位。 - NicJ

Answer 2

performance.timing不是基于最后一次请求和响应的。它测量页面生命周期中navigationStart阶段和loadEventStart阶段之间的延迟。如此处所述，其主要用途是确定页面加载速度。

在我看来，performance.timing不能真正用于测量连接速度，因为它是在用户收到响应之后启动的JavaScript对象，并在浏览器上运行。建议您简单地对用户进行ping并使用往返时间。

- DarrenVortex

---

嗨，我仍然有点困惑它是如何真正工作的，但我确实了解一般情况。对于打开，我使用了“navigationStart和loadEventStart”，这应该是正确的，对吗？现在我有一个问题，因为这个性能类发生在页面加载或访问URL时（根据我的理解？），那么我如何得到关闭网页的速度？还是另一个类？ - Kevin Patrick Tan