时间戳

首页 > 解决方案 > 如何测试单个脚本对网站的性能影响？

node.js - 如何测试单个脚本对网站的性能影响？

问题描述

我试图了解添加到网页的附加脚本的影响。

我的第一次尝试是使用 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.jsperformancewebbrowserlighthouse

解决方案

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

Harry Roberts (csswizardry)有一个精彩的演讲，准确地描述了该做什么。特别是，在 16' 左右描述了使用 WebPageTest 进行的分析。

推荐阅读