如何从 0 到 1 搭建性能检测系统

/**  * 执行页面信息收集  *  * @param {PassContext} passContext  */async run(runOptions: RunOptions) {  const gathererResults = {};  // 使用 Puppeteer 创建无头浏览器，创建页面  const passContext = await this.prepare(runOptions);  try {    // 根据用户是否输入了用户名和密码判断是否要登录政采云    await this.preLogin(passContext);        // 页面打开前的钩子函数    await this.beforePass(passContext);        // 打开页面，获取页面数据    await this.getLhr(passContext);        // 页面打开后的钩子函数    await this.afterPass(passContext, gathererResults);        // 收集页面性能    return await this.collectArtifact(passContext, gathererResults);  } catch (error) {    throw error;  } finally {    // 关闭页面和无头浏览器    await this.disposeDriver(passContext);  }}

/**  * 登录前准备工作，创建浏览器和页面  *  * @param {RunOptions} runOptions  */async prepare(runOptions: RunOptions) {  // puppeteer 启动的配置项  const launchOptions: puppeteer.LaunchOptions = {    headless: true, // 是否无头模式    defaultViewport: { width: 1440, height: 960 }, // 指定打开页面的宽高    // 浏览器实例的参数配置，具体配置可以参考此链接：https://peter.sh/experiments/chromium-command-line-switches/    args: ['--no-sandbox', '--disable-dev-shm-usage'],    executablePath: '/usr/bin/chromium-browser', // 默认 Chromium 执行的路径，此路径指的是服务器上 Chromium 安装的位置  };  // 服务器上运行时使用服务器上独立安装的 Chromium  // 本地运行的时候使用 node_modules 中的 Chromium  if (process.env.NODE_ENV === 'development') {    delete launchOptions.executablePath;  }  // 创建浏览器对象  const browser = await puppeteer.launch(launchOptions);  // 获取浏览器对象的默认第一个标签页  const page = (await browser.pages())[0];  // 返回浏览器和页面对象  return { browser, page };}

/**  * 在 Puppeteer 中使用 Lighthouse  *  * @param {RunOptions} runOptions  */async getLhr(passContext: PassContext) {  // 获取浏览器对象和检测链接  const { browser, url } = passContext;  // 开始检测  const { artifacts, lhr } = await lighthouse(url, {    port: new URL(browser.wsEndpoint()).port,    output: 'json',    logLevel: 'info',    emulatedFormFactor: 'desktop',    throttling: {      rttMs: 40,      throughputKbps: 10 * 1024,      cpuSlowdownMultiplier: 1,      requestLatencyMs: 0, // 0 means unset      downloadThroughputKbps: 0,      uploadThroughputKbps: 0,    },    disableDeviceEmulation: true,    onlyCategories: ['performance'], // 是否只检测 performance    // chromeFlags: ['--disable-mobile-emulation', '--disable-storage-reset'],  });  // 回填数据  passContext.lhr = lhr;  passContext.artifacts = artifacts;}

/**  * 执行所有收集器中的 afterPass 方法  *  * @param {PassContext} passContext  * @param {GathererResults} gathererResults  */async afterPass(passContext: PassContext, gathererResults: GathererResults) {  const { page, gatherers } = passContext;  // 遍历所有收集器，执行 afterPass 方法  for (const gatherer of gatherers) {    const gathererResult = await gatherer.afterPass(passContext);    gathererResults[gatherer.name] = gathererResult;  }  // 执行完所有方法后截图记录  gathererResults.screenshotBuffer = await page.screenshot();}

import { Gatherer } from './gatherer';import { PassContext } from '../interfaces/pass-context.interface';// 实现 Gatherer 抽象类export default class DOMStats extends Gatherer {  horizontalScrollBar;  /**  * 页面打开前的钩子函数  *  * @param {PassContext} passContext  */  async beforePass(passContext: PassContext) {    const { browser } = passContext;    // 当浏览器的对象发生变化的时候，说明新打开页面了，此时可以获取到标签页 page 对象    browser.on('targetchanged', async target => {      const page = await target.page();      // 等待 dom 文档加载完成的时候      page.on('domcontentloaded', async () => {        // 通过 evaluate 方法可以获取到页面上的元素和方法        this.horizontalScrollBar = await page.evaluate(() => {          return document.body.scrollWidth > document.body.clientWidth;        });      });    });  }  /**  * 页面执行结束后的钩子函数  *  * @param {PassContext} passContext  */  async afterPass(passContext: PassContext) {    const { artifacts } = passContext;        // 从 lighthouse 结果对象 lhr 中获取 dom 节点的 depth，width 和 totalBodyElements    const {      DOMStats: { depth, width, totalBodyElements },    } = artifacts;    return {      numElements: totalBodyElements,      maxDepth: depth.max,      maxWidth: width.max,      hasHorizontalScrollBar: !!this.horizontalScrollBar,    };  }}

/**  * 计算得分方法，根据模型上的得分配置项最终生成得分并入库  *  * @param {Artifact} artifact  * @param {string[]} whitelist  */async calc(artifact: Artifact, whitelist?: string[]): Promise<AuditDto> {  // 根据每条 metaid 动态加载不同的计算方法文件，每个 metaid 指的就是一个性能评分指标，比如说是否有横向滚动条  const audit = await import(`../audits/${this.meta.id}`).then(m => m.default);    // 执行每个计算方法文件中的 audit 方法，计算得分，比如没有横向滚动条的时候得5分，有横向滚动条不得分  const { rawValue, score, displayValue, details = [] } = audit.audit(artifact, whitelist);  const auditDto = new AuditDto();  auditDto.id = this.meta.id;    // 检测指标名称展示  auditDto.title = this.meta.title;    // 检测指标描述  auditDto.description = this.meta.description;    // 检测指标详情  auditDto.details = details;    // 检测指标登记，判断是否计算入得分  auditDto.level = this.level;  // 扣分上限根据不同的 meta，可能上限也有不同，upperLimitScore 指的是扣分上限，从数据库获取  auditDto.score = score * this.weight <= -this.upperLimitScore ? -this.upperLimitScore : score * this.weight;    // 得分情况  auditDto.rawValue = rawValue;    // 得分如何展示  auditDto.displayValue = displayValue;  return auditDto;}

import {  Injectable,  OnModuleInit,} from '@nestjs/common';import * as schedule from 'node-schedule';@Injectable()export class ScheduleService implements OnModuleInit {  onModuleInit() {    this.init();  }  async init() {    // 本地启动时不执行一系列定时任务    if (process.env.NODE_ENV !== 'development') {      // 每周五02:00开始收集页面性能      schedule.scheduleJob(`hawkeye-weekly-report`, '0 0 2 * * 5', async () => {        // 调用检测接口记录性能评分        await this.report();      });      // 每周五18:00发送周报      schedule.scheduleJob(`hawkeye-weekly-send`, '0 0 18 * * 5', async () => {        // 发送邮件的具体实现方法，主要通过 ejs 渲染模版，通过 nodemailer 发送邮件        await this.send();       });    }  }}