首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用Puppeteer & Chrome DevTools协议,如何获得4种性能计时指标?

使用Puppeteer & Chrome DevTools协议,如何获得4种性能计时指标?
EN

Stack Overflow用户
提问于 2019-08-20 16:59:35
回答 1查看 687关注 0票数 0

为了创建下面的屏幕截图,我打开了Chrome,选择了"Performance“选项卡,开始录制,打开https://www.ted.com,然后停止录制。我看到的是:

如何以编程方式使用Puppeteer &潜在的铬DevTools协议,在屏幕截图中圈出4种度量标准?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-08-23 09:10:11

你可以试试这个

代码语言:javascript
运行
复制
 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`);

输出:

代码语言:javascript
运行
复制
first-paint: 927ms
first-contentful-paint: 927ms
domContentLoadedEventEnd :1409ms
domComplete :4103ms
loadEventEnd :4183ms
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57578428

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档