如何从 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();
       });
    }
  }
}