2

尝试使用 puppeteer 框架获取 UI 性能 KPI，我有以下脚本

const puppeteer = require('puppeteer');
const select = require('puppeteer-select');

(async () => {
    const launchOptions = {
        headless: false,
        executablePath: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
        args: ['--start-maximized',
            '--disable-web-security',
            '--disable-features=IsolateOrigins,site-per-process'],
        defaultViewport: null
    };
    const browser = await puppeteer.launch(launchOptions);
    const url = "http://app.contries/user_interface";
    const page = await browser.newPage();
    try {
        //Launch URL
        await page.goto(url);
        const performanceTiming = JSON.parse(
            await page.evaluate(() => JSON.stringify(window.performance.timing))
        );
        console.log(performanceTiming);

    } catch (error) {
        console.error(error);
    } finally {

        await page.waitFor(10000);
        console.log("Closing the browser session")
        await browser.close();
    }
})();

上面这段脚本的输出是：

connectStart: 1600180693460,            
navigationStart: 1600180692020,
loadEventEnd: 1600180700487,                
domLoading: 1600180697154,                  
secureConnectionStart: 0,
fetchStart: 1600180692021, 
domContentLoadedEventStart: 1600180700039, 
responseStart: 1600180697148,               
responseEnd: 1600180697215,                 
domInteractive: 1600180700038,              
domainLookupEnd: 1600180693460,                 
redirectStart: 0,                               
requestStart: 1600180693764,
unloadEventEnd: 0,
unloadEventStart: 0, 
domComplete: 1600180700205,                     
domainLookupStart: 1600180693460,           
loadEventStart: 1600180700205,                  
domContentLoadedEventEnd: 1600180700089,    
redirectEnd: 0,                             
connectEnd: 1600180693764

如何从上述输出中获取以下 KPI：

  1. 标题时间
  2. 开始渲染的时间
  3. 互动时间
  4. DNS查询时间
  5. 连接时间
  6. 第一个字节的时间
  7. 到最后一个字节的时间
  8. 整体等待
4

0 回答 0