时间到第一个字节与 javascript？答案

【问题标题】：Time to first byte with javascript?时间到第一个字节与 javascript？
【发布时间】：2017-05-20 04:17:55
【问题描述】：

是否有任何现代浏览器通过 javascript 在 http 请求上公开第一个字节的时间 (TTFB) 和/或最后一个字节的时间 (TTLB) 而无需借助任何插件？

我想要的是一个 javascript sn-p，它可以访问这些值并将它们发送回服务器以进行性能监控。

澄清：我不是在寻找任何 js 计时器或开发人员工具。我想知道并希望是否有任何浏览器可以测量加载时间并通过 javascript 公开这些值。

【问题讨论】：

您的意思是使用 JavaScript 测量页面加载所需的时间？
是的。如果可能的话，我希望浏览器从发送请求到开始接收数据和/或接收到所有数据所需的时间。您可以在 Safari/Chrome 开发者工具、Firebug 等中获得的数据。完全无需借助任何开发者工具。

【解决方案1】：

你想要的是 W3C 的PerformanceTiming 接口。浏览器支持很好（参见 2011 年 9 月的 this survey）。就像您在回应影子向导的回答时推测的那样，这些时间被浏览器捕获并暴露给窗口对象中的 javascript。您可以在window.performance.timing 中找到它们。您的 TTFB 间隔的端点将是window.performance.timing.responseStart（定义为“用户代理从服务器、相关应用程序缓存或本地资源接收到响应的第一个字节之后的时间”）。起点有一些选项，取决于您是否有兴趣卸载以前的文档，或有时间解析 DNS，因此您可能需要阅读文档并确定哪个适合您的应用程序。

【讨论】：

var performanceTiming = performance.timing; ttfb = performanceTiming.responseStart - performanceTiming.requestStart; IE 7+ 支持此功能

【解决方案2】：

我担心这是不可能的。

只有在部分请求从服务器发送、被浏览器接受并被解析后，JavaScript 才会“激活”。

你问的问题就像问“我可以在吃完蛋糕后量一下它的重量吗？” - 你需要先称重，然后才能吃蛋糕。

【讨论】：

感谢您的回复。我不会把它说得更像“我可以访问浏览器通过 javascript 为我测量的东西吗”。显然，浏览器中需要有一些东西来收集我所追求的统计数据。 JS 部分只会公开这些已经收集的值。
也许可以对 HTML 标头中加载的文件进行 io 文件检索 - 如果上次访问它们的服务器时间可用？这可能会告诉你开始时间。如果这甚至可行，那么结束时间无论如何都会更加困难，因为加载它的时间不是读取最后一个字节的时间......只是一个想法。
@NA 不，看不出浏览器为什么会收集这样的东西？也许在开源浏览器中可以公开这样的事情，但我非常怀疑是否有任何现代浏览器可以存储这样的统计信息，更不用说将它们公开给 JS。无论如何，与浏览器相关的所有内容都将成为navigator 对象的一部分。

【解决方案3】：

您可以在 Chrome 开发者工具中查看响应时间。

【讨论】：

他明确要求“不借助任何插件”——猜想他也指 Firebug 之类的。
是的，但 Firebug 是。作为记录，-1 不是我的 - 这不是坏答案，只是有一个我指出的“缺陷”。 :) 顺便说一句，是什么让你在发布这个答案后几乎整整一年都想起了这个答案？
你是 100% 正确的，我更正了答案。 -1 引起了我的注意 :-)

【解决方案4】：

在 JS 中获取真正的 TTFB 是不可能的，因为页面只有在收到第一个字节后才会获取 JS 上下文。您可以获得的最接近的是以下内容：

<script type="text/javascript">var startTime = (new Date()).getTime()</script>

在您的<head> 标记中很早。然后根据您是否要检查 html 何时完成或所有内容都完成下载，您可以在 html 页面底部附近放置一个类似的标签（并减去值），然后执行 XHR 返回服务器（或设置一个cookie，您可以在下一页请求中检索服务器端）或监听onload事件，并执行相同操作。

【讨论】：

但是 TTFB 是从发送请求时开始计算的。根据定义，TTFB 将已经过去，因为 javascript 将包含在后面的字节中。
那和 Javascript 时间测量是 f'd：ejohn.org/blog/accuracy-of-javascript-time
@Smirkin 是的，但它是最接近使用 Javascript 的方法。编辑以使这一点更清楚。
真的。这取决于您要测量的内容。如果您正在查看交付内容（即 TTLB - TTFB）需要多长时间，那么它会给出一个指示。但是，它不会给出响应时间的任何指示。如果页面很小并且需要几毫秒来接收内容，但初始响应需要一分钟，那么您可能看起来性能很好，但用户体验会有所不同。