Lighthouse使用说明

声明

本来想实时做一个示例讲述Lighthouse的用法，然后，本地安装了lighthousev8.1.0，悲剧了，使用的v7.5.0的配置不兼容。

遂，整理一下自己使用v7.5.0的输出，最后补充一点点v8.1.0的使用，真的只有一点点...因为没执行下去。

Lighthouse使用说明

这里不是具体的场景，只是介绍Lighthouse的用法，相信，您会找到自己的应用场景的。

前端性能监控模型

Lighthouse主要是用于前端性能监控，两种常见模型：合成监控、真实用户监控。

合成监控（Synthetic Monitoring，SYN）

合成监控，就是在一个模拟场景里，去提交一个需要做性能检测的页面，通过一系列的工具、规则去运行你的页面，提取一些性能指标，得出一个性能/审计报告

真实用户监控（Real User Monitoring，RUM）

真实用户监控，就是用户在我们的页面上访问，访问之后就会产生各种各样的性能数据，我们在用户离开页面的时候，把这些性能数据上传到我们的日志服务器上，进行数据的提取清洗加工，最后在我们的监控平台上进行展示的一个过程

对比项	合成监控SYN	真实用户监控RUM
实现难度及成本	较低	较高
采集数据丰富度	丰富	基础
数据样本量	较小	大（视业务体量）
适合场景	支持团队自有业务，对性能做定性分析，或配合CI做小数据量的监控分析	作为中台产品支持前台业务，对性能做定量分析，结合业务数据进行深度挖掘

Lighthouse是什么

Lighthouse 是一个开源的自动化工具，用于分析和改善 Web 应用的质量。

Lighthouse使用环境

• Chrome开发者工具
• 安装扩展程序
• Node CLI
• Node module

Lighthouse组成部分

• 驱动Driver

  通过Chrome Debugging Protocol和Chrome进行交互。

• 收集器Gatherer

  决定在页面加载过程中采集哪些信息，将采集的信息输出为Artifact

• 审查器Audit

  将 Artifact 作为输入，审查器会对其运行 1 个测试，然后分配通过/失败/得分的结果。

• 报告Reporter

  将审查的结果分组到面向用户的报告中（如最佳实践）。对该部分加权求和然后得出评分。

Lighthouse工作流程

简单来说Lighthouse的工作流程就是：建立连接 -> 收集日志 -> 分析 -> 生成报告。

Lighthousev7.5.0 NPM包使用示例

初始化开发环境

mkdir lh && cd $_ // 在命令行中创建项目目录、进入目录
npm init -y // 初始化Node环境
npm i -S puppeteer // 提供浏览器环境，其它NPM包也可以
npm i -S lighthouse // 安装lighthouse
//         ^  lighthouse@7.5.0

初始化运行

const puppeteer = require('puppeteer');
const lighthouse = require('lighthouse');
const { URL } = require('url');
(async() => {
    const url = 'https://huaban.com/discovery/';
    const browser = await puppeteer.launch({
      headless: false, // 调试时设为 false，可显式的运行Chrome
      defaultViewport: null,
    });
    const lhr = await lighthouse(
      url,
      {
        port: (new URL(browser.wsEndpoint())).port,
        output: 'json',
        logLevel: 'info',
      }
    );
    console.log(lhr)
    await browser.close();
})();

以花瓣为例，puppeteer目前仅提供浏览器环境，lighthouse通过browser.wsEndpoint()与浏览器进行通信。

生成报告

通过初始化运行，我们能看到lighthouse的执行，却无法直观的看到结果。

const puppeteer = require('puppeteer');
const lighthouse = require('lighthouse');
const { URL } = require('url');
const path = require('path');
const printer = require('lighthouse/lighthouse-cli/printer');
const Reporter = require('lighthouse/lighthouse-core/report/report-generator');
function generateReport(runnerResult) {
  const now = new Date();
  const Y = now.getFullYear();
  const M = now.getMonth();
  const D = now.getDate();
  const H = now.getHours();
  const m = now.getMinutes();
  const filename = `lhr-report@${Y}-${M + 1 < 10 '0' + (M + 1) : M + 1}-${D}-${H}-${m}.html`;
  const htmlReportPath = path.join(__dirname, 'public', filename);
  const reportHtml = Reporter.generateReport(runnerResult.lhr, 'html');
  printer.write(reportHtml, 'html', htmlReportPath);
}
(async() => {
    const url = 'https://huaban.com/discovery/';
    const browser = await puppeteer.launch({
      headless: false,
      defaultViewport: null,
    });
    const lhr = await lighthouse(
      url,
      {
        port: (new URL(browser.wsEndpoint())).port,
        output: 'json',
        logLevel: 'info',
      }
    );
    generateReport(lhr)
    await browser.close();
})();

手动创建一个public方法（这里不通过代码检测是否有目录了），新增generateReport方法，将报告结果输出为html。

将输出的HTML用浏览器打开，可以直观地看到输出结果。

默认展示

默认有五个分类：

五个默认分类

国际化语言设置

(async() => {
    const url = 'https://huaban.com/discovery/';
    const browser = await puppeteer.launch({
      headless: false,
      defaultViewport: null,
    });
    const lhr = await lighthouse(
      url,
      {
        port: (new URL(browser.wsEndpoint())).port,
        output: 'json',
        logLevel: 'info',
      },
      {
        settings: {
          locale: 'zh' //  国际化
        }
      }
    );
    generateReport(lhr)
    await browser.close();
})();

这里，我们可以看到lighthouse(url, flags, configJSON)接收三个参数。

• url
  • 需要检测的目标地址
• flags
  • Lighthouse运行的配置项
  • 决定运行的端口、调试地址，查找Gatherer、Audit的相对地址
  • 具体配置见：https://github.com/GoogleChrome/lighthouse/blob/v7.5.0/types/externs.d.ts#L217
• configJSON
  • Lighthouse工作的配置项
  • 决定如何工作，收集何种信息、如何审计、分类展示...
  • 具体配置见：
    • https://github.com/GoogleChrome/lighthouse/blob/v7.5.0/types/config.d.ts#L20
    • https://github.com/GoogleChrome/lighthouse/blob/v7.5.0/types/externs.d.ts#L166

自定义收集器Gatherer

父级Gatherer —— 继承目标

// https://github.com/GoogleChrome/lighthouse/blob/v7.5.0/lighthouse-core/gather/gatherers/gatherer.js
class Gatherer {
  /**
   * @return {keyof LH.GathererArtifacts}
   */
  get name() {
    // @ts-expect-error - assume that class name has been added to LH.GathererArtifacts.
    return this.constructor.name;
  }

  /* eslint-disable no-unused-vars */

  /**
   * Called before navigation to target url.
   * @param {LH.Gatherer.PassContext} passContext
   * @return {LH.Gatherer.PhaseResult}
   */
  beforePass(passContext) { }

  /**
   * Called after target page is loaded. If a trace is enabled for this pass,
   * the trace is still being recorded.
   * @param {LH.Gatherer.PassContext} passContext
   * @return {LH.Gatherer.PhaseResult}
   */
  pass(passContext) { }

  /**
   * Called after target page is loaded, all gatherer `pass` methods have been
   * executed, and — if generated in this pass — the trace is ended. The trace
   * and record of network activity are provided in `loadData`.
   * @param {LH.Gatherer.PassContext} passContext
   * @param {LH.Gatherer.LoadData} loadData
   * @return {LH.Gatherer.PhaseResult}
   */
  afterPass(passContext, loadData) { }

  /* eslint-enable no-unused-vars */
}

自定义示例

import { Gatherer } from 'lighthouse';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const DevtoolsLog = require('lighthouse/lighthouse-core/gather/devtools-log.js');

class LIMGGather extends Gatherer {
  /** @type {LH.Gatherer.GathererMeta<'DevtoolsLog'>} */
  meta = {
    supportedModes: [ 'navigation' ],
    dependencies: { DevtoolsLog: DevtoolsLog.symbol },
  };

  /**
   * @param {LH.Artifacts.NetworkRequest[]} networkRecords
   */
  indexNetworkRecords(networkRecords) {
    return networkRecords.reduce((arr, record) => {
      // An image response in newer formats is sometimes incorrectly marked as "application/octet-stream",
      // so respect the extension too.
      const isImage = /^image/.test(record.mimeType) || /\.(avif|webp)$/i.test(record.url);
      // The network record is only valid for size information if it finished with a successful status
      // code that indicates a complete image response.
      if (isImage) {
        arr.push(record);
      }

      return arr;
    }, []);
  }

  /**
   * @param {LH.Gatherer.FRTransitionalContext} context
   * @param {LH.Artifacts.NetworkRequest[]} networkRecords
   * @return {Promise<LH.Artifacts['ImageElements']>}
   */
  async _getArtifact(_context, networkRecords) {
    const imageNetworkRecords = this.indexNetworkRecords(networkRecords);

    return imageNetworkRecords;
  }

  /**
   * @param {LH.Gatherer.PassContext} passContext
   * @param {LH.Gatherer.LoadData} loadData
   * @return {Promise<LH.Artifacts['ImageElements']>}
   */
  async afterPass(passContext, loadData) {
    return this._getArtifact({ ...passContext, dependencies: {} }, loadData.networkRecords);
  }
}

module.exports = LIMGGather;

单独的Gatherer是没有任何用途的，只是收集Audit需要用到的中间数据，最终展示的数据为Audit的输出。

所以，我们讲述完自定义Audit后，再说明Gatherer如何使用。

Notes：收集器Gatherer必须有个name属性，默认是父类get name()返回的this.constructor.name;，如需自定义，重写get name()方法。

Notes： Gatherer最好不要和默认收集器重名，若configJSON.configPath配置的等同默认路径，会忽略自定义 —— 后续会详细讲述。

自定义审计Audit

父级Audit —— 继承目标

Audit类有很多方法，个人用到的主要重写的也就meta、audit。

// https://github.com/GoogleChrome/lighthouse/blob/v7.5.0/lighthouse-core/audits/audit.js
class Audit {
  ...
  /**
   * @return {LH.Audit.Meta}
   */
  static get meta() {
    throw new Error('Audit meta information must be overridden.');
  }
  ...
  /**
   * @return {Object}
   */
  static get defaultOptions() {
    return {};
  }
  ...
  /* eslint-disable no-unused-vars */

  /**
   *
   * @param {LH.Artifacts} artifacts
   * @param {LH.Audit.Context} context
   * @return {LH.Audit.Product|Promise<LH.Audit.Product>}
   */
  static audit(artifacts, context) {
    throw new Error('audit() method must be overriden');
  }
  ...
}

自定义示例

import { Audit } from 'lighthouse';
import { Pages, AuditStrings, Scores } from '../../config/metrics';
import { toPrecision } from '../../util';
class LargeImageOptimizationAudit extends Audit {
  static get meta() {
    return {
      ...Pages[AuditStrings.limg],
      // ^ 重要的是id字段，定义分类时需要指定
      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
      // ^ 分数的展示模式，只有Audit.SCORING_MODES.NUMERIC才有分值，若取其它值，分值score始终为0.
      requiredArtifacts: [ 'LIMGGather' ],
      // ^ 定义依赖的Gatherers
    };
  }
  static audit(artifacts) {
    const limitSize = 50;
    const images = artifacts.LIMGGather;
    // ^ 解构或直接访问获取Gatherer收集的数据。
    /**
    * 后续的逻辑是，判断大于50K的图片数量。
    * 以当前指标总分 - 大于50K图片数量 * 出现一次扣step分
    * 计算最终分数
    */
    const largeImages = images.filter(img => img.resourceSize > limitSize * 1024);
    const scroeConfig = Scores[AuditStrings.limg];
    const score = scroeConfig.scores - largeImages.length * scroeConfig.step;
    const finalScore = toPrecision((score < 0 0 : score) / scroeConfig.scores);
    //      ^ Lighthouse中Audit、categories中的分数都是0～1范围内的

    const headings = [
      { key: 'url', itemType: 'thumbnail', text: '资源预览' },
      { key: 'url', itemType: 'url', text: '图片资源地址' },
      { key: 'resourceSize', itemType: 'bytes', text: '原始大小' },
      { key: 'transferSize', itemType: 'bytes', text: '传输大小' },
      /**
      * key：返回对象中details字段Audit.makeTableDetails方法第二个参数中对应的键值
      * itemType是Lighthouse识别对象key对应值，来使用不同的样式展示的。
      * itemType类型文档https://github.com/GoogleChrome/lighthouse/blob/v7.5.0/lighthouse-core/report/html/renderer/details-renderer.js#L266
      */
      // const headings = [
      //   { key: 'securityOrigin', itemType: 'url', text: '域' },
      //   { key: 'dnsStart', itemType: 'ms', granularity: '0.001', text: '起始时间' },
      //   { key: 'dnsEnd', itemType: 'ms', granularity: '0.001', text: '结束时间' },
      //   { key: 'dnsConsume', itemType: 'ms', granularity: '0.001', text: '耗时' },
      // ];
      /////itemType === 'ms'时，可以设置精度granularity
    ];
    return {
      score: finalScore,
      displayValue: `${largeImages.length} / ${images.length} Size >${limitSize}KB`,
      // ^ 当前审计项的总展示
      details: Audit.makeTableDetails(headings, largeImages),
      // ^ 当前审计项的细节展示
      // ^ table类型的展示，要求第二个参数largeImages是平铺的对象元素构成的数组。
      // https://github.com/GoogleChrome/lighthouse/blob/v7.5.0/lighthouse-core/report/html/renderer/details-renderer.js
    };
  }
}
module.exports = LargeImageOptimizationAudit;

这里，我们仍然不讲述Gatherer、Audit如何使用，我们继续讲述Categories时，统一讲述如何使用。

自定义分类Categories

import { LargeImageOptimizationAudit } from '../gathers';
//          ^ gathers文件夹下定义了统一入口index.js，导出所有的自定义收集器
import { LIMGGather } from '../audits';
//        ^ audits文件夹下定义了统一入口index.js，导出所有的自定义审查器
module.exports = {
  extends: 'lighthouse:default', // 决定是否包含默认audits，就是上述默认五个分类
  passes: [{
    passName: 'defaultPass',
    gatherers: [
      LIMGGather , // 自定义Gather的应用 
    ],
  }],
  audits: [
    LargeImageOptimizationAudit , // 自定义Audit的应用 
  ],
  categories: {
    mysite: {
      title: '自定义指标',
      description: '我的自定义指标',
      auditRefs: [
        {
          id: 'large-images-optimization', 
          // ^ Audit.id，自定义Audit.meta时指定；
          // 给自定义Audit单独定义一个分类。
          weight: 1
          // ^ 当前审计项所占的比重，权重weight总和为100！
        },
      ],
    },
  },
};

来一个非上述配置的自定义审计、分类的展示效果（因为这篇文章是后续整理的）。

自定义审计displayValue

以上是自定义审计返回对象中定义的displayValue字段。

自定义审计details

以上是自定义审计返回对象中details: Audit.makeTableDetails(headings, largeImages),展示示例。
最终的展示效果：

最终效果

这里的展示效果，是去除默认五个分类后的展示，通过注释掉上述配置的extends: 'lighthouse:default',即可去掉。

Notes：去掉extends: 'lighthouse:default',后，若使用内置或自定义的Audit依赖requiredArtifacts: ['traces', 'devtoolsLogs', 'GatherContext']，lighthouse运行会报错：

errorMessage: "必需的 traces 收集器未运行。"
或
errorMessage: "Required traces gatherer did not run."

需要补充以下配置：

passes = [
  {
    passName: 'defaultPass',
    recordTrace: true,// 开启Traces收集器
    gatherers: [
    ],
  },
];

优化

NPM包与Chrome Devtools中的Lighthouse分值差异大

NPM包使用Lighthouse进行合成监控，模拟页面在较慢的连接上加载，会限制 DNS 解析的往返行程以及建立 TCP 和 SSL 连接。
而Chrome Devtools的Lighthouse做了很多优化，也没有进行节流限制，即使设置节流，也只是接收服务器响应时的延迟，而不是模拟每次往返双向。

NPM包使用时，添加参数--throttling-method=devtools来平衡差异。

Lighthouse切换桌面模式

Lighthouse默认是移动端模式，不同版本配置不同，配置需要对应版本。

// https://github.com/GoogleChrome/lighthouse/discussions/12058
// 以下是configJSON.settings的配置
...
  getSettings() {
    return (function(isDesktop) {
      if (isDesktop) {
        return {
          // extends: 'lighthouse:default', // 是否包含默认audits
          locale: 'zh',
          formFactor: 'desktop', // 必须的lighthouse模拟Device
          screenEmulation: { // 结合formFactor使用，要匹配
            ...constants.screenEmulationMetrics.desktop,
          },
          emulatedUserAgent: constants.userAgents.desktop, // 结合formFactor使用，要匹配
        };
      }
      return {
        // extends: 'lighthouse:default', // 是否包含默认audits
        locale: 'zh',
        formFactor: 'mobile', // 必须的lighthouse模拟Device
        screenEmulation: { // 结合formFactor使用，要匹配
          ...constants.screenEmulationMetrics.mobile,
        },
        emulatedUserAgent: constants.userAgents.mobile, // 结合formFactor使用，要匹配
      };
    })(this.isDesktop);
  }

Lighthouse的Gather、Audits路径配置

对象配置

见上述使用；

路径配置

// 引入方式：相对于项目根目录，设置相对路径
...
      lightHouseConfig: {
        // onlyCategories: onlyCategories.split(','), // https://github.com/GoogleChrome/lighthouse/blob/master/docs/configuration.md
        reportPath: path.join(__dirname, '../public/'), // 测试报告存储目录
        passes: [
          {
            passName: 'defaultPass',
            gatherers: [
              'app/gathers/large-images-optimization.ts',
            ],
          },
        ],
        audits: [
          'app/audits/large-images-optimization.ts',
        ],
        categories: {    
          mysite: {
            title: '自定义指标',
            description: '我的自定义指标',
            auditRefs: [
              {
                id: 'large-images-optimization', 
                weight: 1
              },
            ],
        },
...

其中：源代码使用require(path)的形式调用，而不是require(path).default，只支持module.epxorts = class Module导出

BasePath路径配置

理论上配置：

  // lighthouse运行的第二个参数flags
  {
    port: new URL(this.browser.wsEndpoint()).port,
    configPath: path.join(__filename), // 查找gather、audit的基准
                            //    ^路径定位到文件，源码内会上溯到目录结构；若定位到目录，源码内会上溯到上一级目录
  },
  // lighthouse运行的第三个参数configJson
  ...
    passes: [
      {
        passName: 'defaultPass',
        gatherers: [
          'large-images-optimization',
        ],
      },
    ],
    audits: [
      'large-images-optimization',
    ],
...

然而，"lighthouse": "^7.5.0",源码中：

requirePath = resolveModulePath(gathererPath, configDir, 'gatherer'); // 检索gather
const absolutePath = resolveModulePath(auditPath, configDir, 'audit'); // 检索audit

第三个参数并没有使用。
即v7.5.0会在配置的configPath下查找对应的'large-images-optimization'。

现做如下妥协：

// lighthouse第三个参数configJson
  ...
    passes: [
      {
        passName: 'defaultPass',
        gatherers: [
          'gathers/large-images-optimization',
        ],
      },
    ],
    audits: [
      'audits/large-images-optimization',
    ],
...

Gather、Audti配置引入源码实现

function expandGathererShorthand(gatherer) {
  if (typeof gatherer === 'string') {
    // just 'path/to/gatherer'
    return {path: gatherer};
  } else if ('implementation' in gatherer || 'instance' in gatherer) {
    // {implementation: GathererConstructor, ...} or {instance: GathererInstance, ...}
    return gatherer;
  } else if ('path' in gatherer) {
    // {path: 'path/to/gatherer', ...}
    if (typeof gatherer.path !== 'string') {
      throw new Error('Invalid Gatherer type ' + JSON.stringify(gatherer));
    }
    return gatherer;
  } else if (typeof gatherer === 'function') {
    // just GathererConstructor
    return {implementation: gatherer};
  } else if (gatherer && typeof gatherer.beforePass === 'function') {
    // just GathererInstance
    return {instance: gatherer};
  } else {
    throw new Error('Invalid Gatherer type ' + JSON.stringify(gatherer));
  }
}
//https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/config/config-helpers.js#L342

function resolveGathererToDefn(gathererJson, coreGathererList, configDir) {
  const gathererDefn = expandGathererShorthand(gathererJson);
  if (gathererDefn.instance) {
    return {
      instance: gathererDefn.instance,
      implementation: gathererDefn.implementation,
      path: gathererDefn.path,
    };
  } else if (gathererDefn.implementation) {
    const GathererClass = gathererDefn.implementation;
    return {
      instance: new GathererClass(),
      implementation: gathererDefn.implementation,
      path: gathererDefn.path,
    };
  } else if (gathererDefn.path) {
    const path = gathererDefn.path;
    return requireGatherer(path, coreGathererList, configDir);
  } else {
    throw new Error('Invalid expanded Gatherer: ' + JSON.stringify(gathererDefn));
  }
}

补充：Gather、Audit重名问题

默认Gatherer、Audit的检索只是lighthouse-core包中对应目录的检索，若自定义的Gather、Audit，且使用时使用字符串标识，一定不能和lighthouse-core中的重名。

重名的话，优先使用lighthouse-core中的gather、audit；

function requireGatherer(gathererPath, coreGathererList, configDir) {
  const coreGatherer = coreGathererList.find(a => a === `${gathererPath}.js`);

  let requirePath = `../gather/gatherers/${gathererPath}`;
  if (!coreGatherer) {
    // Otherwise, attempt to find it elsewhere. This throws if not found.
    requirePath = resolveModulePath(gathererPath, configDir, 'gatherer');
  }

  const GathererClass = /** @type {GathererConstructor} */ (require(requirePath));

  return {
    instance: new GathererClass(),
    implementation: GathererClass,
    path: gathererPath,
  };
}

不重名的话，会有一个检索顺序

1. 相对路径检索；
2. process.cwd()同级目录下检索；
3. 配置flags.configPath的话，该路径下查找；
4. flags.configPath只是查找gatherer、audits资源的基准，config的设置和该配置无关。

function resolveModulePath(moduleIdentifier, configDir, category) {
  try {
    return require.resolve(moduleIdentifier);
  } catch (e) {}

  try {
    return require.resolve(moduleIdentifier, {paths: [process.cwd()]});
  } catch (e) {}

  const cwdPath = path.resolve(process.cwd(), moduleIdentifier);
  try {
    return require.resolve(cwdPath);
  } catch (e) {}

  const errorString = 'Unable to locate ' + (category `${category}: ` : '') +
    `\`${moduleIdentifier}\`.
     Tried to require() from these locations:
       ${__dirname}
       ${cwdPath}`;

  if (!configDir) {
    throw new Error(errorString);
  }
  const relativePath = path.resolve(configDir, moduleIdentifier);
  try {
    return require.resolve(relativePath);
  } catch (requireError) {}
  try {
    return require.resolve(moduleIdentifier, {paths: [configDir]});
  } catch (requireError) {}

  throw new Error(errorString + `
       ${relativePath}`);
}

报告解析

我们看到报告中有部分是已通过，这部分怎么解析的呢？

附上源码片段：

// node_modules/lighthouse/lighthouse-core/report/html/renderer/category-renderer.js
...
// 报告模版 解析
 render(category, groupDefinitions = {}) {
    const element = this.dom.createElement('div', 'lh-category');
    this.createPermalinkSpan(element, category.id);
    element.appendChild(this.renderCategoryHeader(category, groupDefinitions));

    // Top level clumps for audits, in order they will appear in the report.
    /** @type {Map<TopLevelClumpId, Array<LH.ReportResult.AuditRef>>} */
    const clumps = new Map();
    clumps.set('failed', []);
    clumps.set('warning', []);
    clumps.set('manual', []);
    clumps.set('passed', []);
    clumps.set('notApplicable', []);

    // Sort audits into clumps.
    for (const auditRef of category.auditRefs) {
      const clumpId = this._getClumpIdForAuditRef(auditRef);
      const clump = /** @type {Array<LH.ReportResult.AuditRef>} */ (clumps.get(clumpId)); // already defined
      clump.push(auditRef);
      clumps.set(clumpId, clump);
    }

    // Render each clump.
    for (const [clumpId, auditRefs] of clumps) {
      if (auditRefs.length === 0) continue;

      if (clumpId === 'failed') {
        const clumpElem = this.renderUnexpandableClump(auditRefs, groupDefinitions);
        clumpElem.classList.add(`lh-clump--failed`);
        element.appendChild(clumpElem);
        continue;
      }

      const description = clumpId === 'manual' category.manualDescription : undefined;
      const clumpElem = this.renderClump(clumpId, {auditRefs, description});
      element.appendChild(clumpElem);
    }

    return element;
  }
...
  _getClumpIdForAuditRef(auditRef) {
    const scoreDisplayMode = auditRef.result.scoreDisplayMode;
    if (scoreDisplayMode === 'manual' || scoreDisplayMode === 'notApplicable') {
      return scoreDisplayMode;
    }

    if (Util.showAsPassed(auditRef.result)) {
      if (this._auditHasWarning(auditRef)) {
        return 'warning';
      } else {
        return 'passed';
      }
    } else {
      return 'failed';
    }
  }
...
// node_modules/lighthouse/lighthouse-core/report/html/renderer/util.js
...
const ELLIPSIS = '\u2026';
const NBSP = '\xa0';
const PASS_THRESHOLD = 0.9;
const SCREENSHOT_PREFIX = 'data:image/jpeg;base64,';

const RATINGS = {
  PASS: {label: 'pass', minScore: PASS_THRESHOLD},
  AVERAGE: {label: 'average', minScore: 0.5},
  FAIL: {label: 'fail'},
  ERROR: {label: 'error'},
};
...
  static showAsPassed(audit) {
    switch (audit.scoreDisplayMode) {
      case 'manual':
      case 'notApplicable':
        return true;
      case 'error':
      case 'informative':
        return false;
      case 'numeric':
      case 'binary':
      default:
        return Number(audit.score) >= RATINGS.PASS.minScore; // 当audit分值大于0.9时，报告展示通过；
    }
  }
...

补充：收集器中依赖浏览器

如这里需要知道是否支持webp格式

async function supportWebp(context) {
  const { driver } = context;
  const expression = function() {
    const elem = document.createElement('canvas');
    // eslint-disable-next-line no-extra-boolean-cast
    if (!!(elem.getContext && elem.getContext('2d'))) {
      // was able or not to get WebP representation
      return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
    }
    // very old browser like IE 8, canvas not supported
    return false;
  };
  return await driver.executionContext.evaluate(
  //                                      ^ 返回Promise
    expression,
    /**
    * expression函数声明，不能是字符串，evaluateSync需要是字符串
    * 你可能看到过evaluateSync，这是lighthousev7.0.0及其以前版本支持的API。
    */
    {
      args: [], // {required} args，否则报错
    },
  );
}
...

完整示例：

import { Gatherer } from 'lighthouse';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const DevtoolsLog = require('lighthouse/lighthouse-core/gather/devtools-log.js');

async function supportWebp(context) {
  const { driver } = context;
  const expression = function() {
    const elem = document.createElement('canvas');
    // eslint-disable-next-line no-extra-boolean-cast
    if (!!(elem.getContext && elem.getContext('2d'))) {
      // was able or not to get WebP representation
      return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
    }
    // very old browser like IE 8, canvas not supported
    return false;
  };
  return await driver.executionContext.evaluate(
    expression,
    {
      args: [],
    },
  );
}
class WebpImageGather extends Gatherer {
  /** @type {LH.Gatherer.GathererMeta<'DevtoolsLog'>} */
  meta = {
    supportedModes: [ 'navigation' ],
    dependencies: { DevtoolsLog: DevtoolsLog.symbol },
  };

  /**
   * @param {LH.Artifacts.NetworkRequest[]} networkRecords
   */
  indexNetworkRecords(networkRecords) {
    return networkRecords.reduce((arr, record) => {
      const isImage = /^image/.test(record.mimeType) || /\.(avif|webp)$/i.test(record.url);
      if (isImage) {
        arr.push(record);
      }

      return arr;
    }, []);
  }

  /**
   * @param {LH.Gatherer.FRTransitionalContext} _context
   * @param {LH.Artifacts.NetworkRequest[]} networkRecords
   * @return {Promise<LH.Artifacts['ImageElements']>}
   */
  async _getArtifact(context, networkRecords) {
    const isSupportWebp = await supportWebp(context);
    const imagesNetworkRecords = this.indexNetworkRecords(networkRecords);

    return {
      isSupportWebp,
      imagesNetworkRecords,
    };
  }
  async afterPass(context, loadData) {
    return this._getArtifact(context, loadData.networkRecords);
  }
}

module.exports = WebpImageGather;

补充：Lighouthousev.8.1.0

对比v.7.5.0

report-generator引用地址

const Reporter = require('lighthouse/report/report-generator');
//                            ^ 该引入地址，是v8.1.0更新的，老版引入地址为'lighthouse/lighthouse-core/report/report-generator'

lighthouse执行

若使用第三个参数，则locale为必填项。

    const lhr = await lighthouse(
      url,
      {
        port: (new URL(browser.wsEndpoint())).port,
        output: 'json',
        logLevel: 'info',
      }
    );

locale配置

lighthousev8.1.0,若node在v12.0.0及其以前的版本，需要手动安装full-icu并在命令行中添加参数node --icu-data-dir="./node_modules/full-icu" index.js
然后，在配置项中才能定义：

const lhr = await lighthouse(
      url,
      {
        port: (new URL(browser.wsEndpoint())).port,
        output: 'json',
        logLevel: 'info',
      },
      {
        settings: {
          extends: 'lighthouse:default', // 发现不再是默认配置的定义了
          locale: 'zh',
        },
        passes: [
          {
            passName: 'defaultPass',
          }
        ],
        audits: [

        ],
      }
    );

参考文档

Lighthouse 网易云音乐实践技术文档

Lighthouse政采云实践技术文档

Puppeteer政采云实践技术文档

Chromium浏览器实例参数配置

Lighthouse Driver源码官方实现

Lighthouse Drive模块与浏览器双向通信协议JSON

Devtools-Protocol协议官方文档

Puppeteer5.3.0中文文档

Puppeteer官方文档

Lighthouse源码