如何为现有Puppeteer登录脚本添加网页响应时间等性能指标测量？

嘿，我明白你想做什么了——setViewport()完全不是用来测量性能指标的工具，它的作用只是设置浏览器视口的宽高，难怪你尝试了没效果。咱们换用Web Performance API结合Puppeteer的能力，就能轻松获取你需要的首字节时间、DOM加载耗时、页面响应时间这些数据。

核心思路 #

浏览器本身提供了performance.timing和performance.getEntriesByType('navigation')接口，能拿到页面加载全流程的时间戳。我们可以通过Puppeteer的page.evaluate()方法在页面上下文里调用这些接口，计算出需要的性能指标。

修改后的完整脚本 #

我已经把性能测量逻辑加到了你原有的登录脚本里，同时修正了脚本里的小错误（比如你写的FirmName应该是定义好的BlockName）：

const puppeteer = require('puppeteer'); 
const myURL = "http://localhost:8080/#/login"; 
const Username = "jmallick"; 
const BlockName = "TEST99"; 
const Password = "Test1234"; 

// 封装一个获取性能指标的工具函数
async function getPerformanceMetrics(page) {
  return await page.evaluate(() => {
    const timing = performance.timing;
    const navigationEntry = performance.getEntriesByType('navigation')[0];
    
    return {
      // 首字节时间（TTFB）
      timeToFirstByte: timing.responseStart - timing.navigationStart,
      // DOM内容加载完成耗时
      domContentLoadedTime: timing.domContentLoadedEventEnd - timing.navigationStart,
      // 页面完全加载耗时
      pageLoadTime: timing.loadEventEnd - timing.navigationStart,
      // 重定向耗时
      redirectTime: timing.redirectEnd - timing.redirectStart,
      // 白屏时间
      firstPaintTime: navigationEntry?.firstPaint || 0,
      // 首次内容绘制时间
      firstContentfulPaint: navigationEntry?.firstContentfulPaint || 0
    };
  });
}

async function loginHandler (){ 
  let browserLaunch;
  try{ 
    browserLaunch = await puppeteer.launch({headless : false, args: ['--window-size=1920,1040']}); 
    const pageRender = await browserLaunch.newPage(); 

    // 1. 测量初始登录页面的加载性能
    await pageRender.goto(myURL, {waitUntil: 'networkidle0'});
    const loginPageMetrics = await getPerformanceMetrics(pageRender);
    console.log('登录页面加载性能指标:', loginPageMetrics);

    await pageRender.type('#txtUserName', Username); 
    await pageRender.type('#txtPassword', Password); 
    await pageRender.type('#txtBlockName', BlockName); // 修正：FirmName -> BlockName

    // 2. 测量登录跳转后的性能
    await Promise.all([ 
      pageRender.click('#fw-login-btn'), 
      pageRender.waitForNavigation({ waitUntil: 'networkidle0' })
    ]);
    const postLoginMetrics = await getPerformanceMetrics(pageRender);
    console.log('登录跳转后页面性能指标:', postLoginMetrics);

    // 3. 测量首页点击后的性能
    const homePage = await pageRender.$('[href="#/home"]'); 
    await Promise.all([
      homePage.click(),
      pageRender.waitForNavigation({ waitUntil: 'networkidle0' })
    ]);
    const homePageMetrics = await getPerformanceMetrics(pageRender);
    console.log('首页加载性能指标:', homePageMetrics);

    return {
      loginPage: loginPageMetrics,
      postLogin: postLoginMetrics,
      homePage: homePageMetrics
    };
  } catch (e){ 
    throw e;
  } finally{ 
    if (browserLaunch) await browserLaunch.close(); 
  } 
} 

loginHandler().then(results => console.log('所有性能指标:', results)).catch(console.error);

关键说明 #

• getPerformanceMetrics函数：封装了性能指标的计算逻辑，通过page.evaluate()在浏览器上下文里调用Web Performance API，返回格式化后的时间数据（单位：毫秒）。
• 三个测量节点：分别在登录页面加载完成后、登录跳转完成后、首页加载完成后获取性能数据，覆盖了你需要的各个关键操作环节。
• 修正了原脚本的错误：把FirmName改成了定义好的BlockName，避免运行时变量未定义的报错。

额外补充 #

如果你还想获取更详细的性能数据（比如每个网络请求的耗时），可以用Puppeteer的page.on('requestfinished')事件监听每个请求的完成时间，或者用page.metrics()获取Puppeteer内置的一些渲染指标（比如任务队列耗时、DOM节点数量等）。

内容的提问来源于stack exchange，提问作者Jyoti Prakash Mallick