使用 Puppeteer 和 Chrome DevTools 协议，如何获得 4 个性能计时指标？

Question

为了创建下面的屏幕截图，我打开了 Chrome 开发人员工具，选择了 "Performance" 选项卡，开始录制，打开 https://www.ted.com，然后停止了录制。这是我看到的：

我如何以编程方式使用 Puppeteer 并可能使用 Chrome DevTools Protocol，获得屏幕截图中圈出的 4 个指标？

Answer 1

你可以试试这个

 const perfEntries = JSON.parse(
        await page.evaluate(() => JSON.stringify(performance.toJSON()))
    );
    const paints = await page.evaluate(_ => {
        const result = {};
        performance.getEntriesByType('paint').map(entry => {
            result[entry.name] = entry.startTime;
        });
        return result;
    });

    for (const [key, val] of Object.entries(paints)) {
        console.log(`${key}: ${Math.round(val)}ms`);
    }

    console.log('domContentLoadedEventEnd :' + `${Math.round(perfEntries.timing.domContentLoadedEventEnd) - Math.round(perfEntries.timeOrigin)}ms`);
    console.log('domComplete :' + `${ Math.round(perfEntries.timing.domComplete) - Math.round(perfEntries.timeOrigin)}ms`);
    console.log('loadEventEnd :' + `${Math.round(perfEntries.timing.loadEventEnd) - Math.round(perfEntries.timeOrigin)}ms`);

输出：

first-paint: 927ms
first-contentful-paint: 927ms
domContentLoadedEventEnd :1409ms
domComplete :4103ms
loadEventEnd :4183ms

使用 Puppeteer 和 Chrome DevTools 协议，如何获得 4 个性能计时指标？

Using Puppeteer & Chrome DevTools Protocol, how to get the 4 Performance Timing metrics?

google-chrome-devtools

puppeteer

chrome-devtools-protocol