javascript - 是否可以使用 fetch API 测量 TTFB

Question

我想知道是否可以使用 fetch API 计算 TTFB(第一个字节的时间)或等待时间，或者只是第一个 block 到达客户端的时间。

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