是否可以使用 fetch API 测量 TTFB答案

【问题标题】：Is it possible to measure TTFB using fetch API是否可以使用 fetch API 测量 TTFB
【发布时间】：2021-08-12 13:33:04
【问题描述】：

我想知道是否有使用 fetch API 计算 TTFB（第一个字节的时间）或等待时间，或者只是第一个块到达客户端的时间。

【问题讨论】：

标签： javascript fetch-api

【解决方案1】：

我设法找到了找到 ttfb 的方法以及请求花费了多长时间。

const realFetch = window.fetch;

window.fetch = function () {
    const prom = realFetch.apply(this, arguments);
    const start = Date.now();
    return prom.then((response) => {
        const reader = response.body.getReader();
        return new ReadableStream({
            start(controller) {
                let begin = false;
                return pump();

                function pump() {
                    return reader.read().then(({done, value}) => {
                        if (!begin) {
                            console.log("ttfb: " + (Date.now() - start));
                            begin = true;
                        }
                        if (done) {
                            console.log("end: " + (Date.now() - start));
                            controller.close();
                            return;
                        }
                        controller.enqueue(value);
                        return pump();
                    });
                }
            }
        })
    })
        .then(stream => new Response(stream))
        .catch((err) => {
                throw err;
            }
        );
};

【讨论】：

这不是 TTFB。这是 TT-first-chunk-of-body

【解决方案2】：

您可以使用 Chrome 开发工具轻松测量它。假设您无权访问 DevTools，您可以使用 Resource Timing API。

例如：

const fetchTiming = performance.getEntriesByType("resource")
  .find(n => n.initiatorType === "fetch");

const TTFB = fetchTiming.responseStart - fetchTiming.requestStart

注意：您需要过滤performance.getEntriesByType("resource") 以检索您需要的fetch，因为可能有多个条目，上面的示例假定第一个条目。

【讨论】：

这不是 TTFB。现在是下载和解析头字节的时候了
@cdaringe 你是对的，我已经相应地更新了我的答案。

【解决方案3】：

PerformanceResourceTiming API 是我们想要的。

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming

此海报展示了演示用法的代码：PerformanceResourceTiming.responseStart and PerformanceResourceTiming.requestStart both are 0 for a status ok http request

【讨论】：