如何测试单个脚本对网站的性能影响？答案

【问题标题】：How to test the performance impact of a single script on a website?如何测试单个脚本对网站的性能影响？
【发布时间】：2021-06-29 10:00:04
【问题描述】：

我正在尝试了解向网页添加额外脚本的影响。

我的第一次尝试是使用 Lighthouse，并尝试在添加脚本之前和之后计算指标：

const fs = require('fs');
const playwright = require('playwright');
const lighthouse = require('lighthouse');
const args = require('minimist')(process.argv.slice(2));

const BROWSER_CONTEXT_DIR = 'browserContextDir';

async function main(inject) {
  const context = await playwright.chromium.launchPersistentContext(BROWSER_CONTEXT_DIR, {
    args: [`--remote-debugging-port=8041`],
    headless: false,
  });

  if (inject){
    await context.addInitScript({
      path: 'script.js'
    })
  }

  const lhOptions = { 
    port: 8041,
    onlyCategories: ['performance']
  };

  const result = await lighthouse(args.url, lhOptions);

  fs.writeFileSync('lhreport.json', JSON.stringify(result.lhr.audits, null, 2));
  await context.close();
  fs.rmdirSync(BROWSER_CONTEXT_DIR, { recursive: true });
  return {
    speed: result.lhr.audits['speed-index'],
    cpu: result.lhr.audits['first-cpu-idle'],
    blocking: result.lhr.audits['total-blocking-time']
  }
}

虽然这可行，但每次运行灯塔的结果差异太大。似乎正确的方法是单独执行此操作，而不是通过注入实时站点。

我可以采取哪些方法来衡量第三方脚本对 CPU、内存和站点速度的影响？

【问题讨论】：

标签： node.js performance web browser lighthouse

【解决方案1】：

您可以使用WebPageTest 运行测试，一次阻止一个第三方脚本并重新运行测试。 Advanced Settings > Block下可以指定要阻塞的脚本

有一个excellent talk by Harry Roberts (csswizardry) 准确描述了要做什么。特别是在 16' 左右描述了使用 WebPageTest 进行的分析。

【讨论】：

谢谢，但这不够针对性 - 如果您在真实站点上执行此操作，则负载之间的变量太多，您无法控制。