探究 LightHouse 工作流程

// will NOT work
driver.defaultSession.sendCommand('Security.enable').then(_ => {
  driver.defaultSession.on('Security.securityStateChanged', state => { /* ... */ });
})

// WILL work! happy happy. :)
driver.defaultSession.on('Security.securityStateChanged', state => { /* ... */ }); // event binding is synchronous
driver.defaultSession.sendCommand('Security.enable');
1.
2.
3.
4.
5.
6.
7.
8.

{
    passes: [{
        passName: 'fastPass',
        atherers: ['fast-gatherer'],
    },
    {
        passName: 'slowPass',
        recordTrace: true,
        useThrottling: true,
        networkQuietThresholdMs: 5000,
        gatherers: ['slow-gatherer'],
     }]
 }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

class JsUsage extends FRGatherer {
  meta = {
    supportedModes: ['snapshot', 'timespan', 'navigation'],
  };

  constructor() {
    super();
    this._scriptUsages = [];
  }
  async startInstrumentation(context) {
    const session = context.driver.defaultSession;
    await session.sendCommand('Profiler.enable');
    await session.sendCommand('Profiler.startPreciseCoverage', {detailed: false});
  }


  async stopInstrumentation(context) {
    const session = context.driver.defaultSession;
    const coverageResponse = await session.sendCommand('Profiler.takePreciseCoverage');
    this._scriptUsages = coverageResponse.result;
    await session.sendCommand('Profiler.stopPreciseCoverage');
    await session.sendCommand('Profiler.disable');
  }

  async getArtifact() {
    const usageByScriptId = {};
    for (const scriptUsage of this._scriptUsages) {
      if (scriptUsage.url === '' || scriptUsage.url === '_lighthouse-eval.js') {
        continue;
      }
      usageByScriptId[scriptUsage.scriptId] = scriptUsage;
    }
    return usageByScriptId;
  }
}

class  FRGatherer { meta = { supportedModes : []};    //在任意时间段内开始观察页面   startInstrumentation ( passContext ) { }  //Sensitive开始观察页面   startSensitiveInstrumentation ( passContext ) { }  //Sensitive停止观察页面的方法   stopSensitiveInstrumentation ( passContext ) { }  //在任意时间段内结束观察页面   stopInstrumentation ( passContext ) { }   //收集有关页面的结果   getArtifact ( passContext ) { }   /** * Legacy  */   get name () {}   async beforePass ( passContext ) {}   pass ( passContext ) { }   async afterPass ( passContext, loadData ) {}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

{
    'pid': 41904, // process ID
    'tid': 1295, // thread ID
    'ts': 1676836141, // timestamp in microseconds
    'ph': 'X', // trace event type
    'cat': 'toplevel', // trace category from which this event came
    'name': 'MessageLoop::RunTask', // relatively human-readable description of the trace event
    'dur': 64, // duration of the task in microseconds
    'args': {}, // contains additional data such as frame when applicable
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

{
    processEvents: [/* all trace events in the main process */],
    mainThreadEvents: [/* all trace events on the main thread */],
    timings: {
        timeOrigin: 0, // timeOrigin is always 0 
        msfirstContentfulPaint: 150, // firstContentfulPaint time in ms after time origin
        /* other key moments */
        traceEnd: 16420, // traceEnd time in ms after time origin
     },
     timestamps: {
         timeOrigin: 623000000, // timeOrigin timestamp in microseconds, marks the start of the navigation of interest
         firstContentfulPaint: 623150000, // firstContentfulPaint timestamp in microseconds
         /* other key moments */
         traceEnd: 639420000, // traceEnd timestamp in microseconds
     },
 }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

begin();
  |
   → runLighthouse(); 
           |
            →  legacyNavigation();
                  

async function legacyNavigation(url, flags = {}, configJSON, userConnection) {
    //... 
  const connection = userConnection || new CriConnection(flags.port, flags.hostname);
  const artifacts = await Runner.gather(() => {
    const requestedUrl = UrlUtils.normalizeUrl(url);
    return Runner._gatherArtifactsFromBrowser(requestedUrl, options, connection);
  }, options);
  return Runner.audit(artifacts, options);
}

static async _gatherArtifactsFromBrowser(requestedUrl, runnerOpts, connection) {
   //创建connection的Driver
    const driver = runnerOpts.driverMock || new Driver(connection);
    const gatherOpts = {
      driver,
      requestedUrl,
      settings: runnerOpts.config.settings,
      computedCache: runnerOpts.computedCache,
    };
    const artifacts = await GatherRunner.run(runnerOpts.config.passes, gatherOpts);
    return artifacts;
  }
 /****** GatherRunner ****/
static async run(passConfigs, options) {

  
 //1.Connecting to browser 
          //通过 Websocket 建立连接, 基于 Chrome Debugging Protocol 通信
         // CDPSession 实例用于与 Chrome Devtools 协议的原生通信 
      await driver.connect();
        // 在 devtools/extension 案例中，我们在尝试清除状态时仍不能在站点上
 // 所以我们首先导航到 about:blank，然后应用我们的仿真和设置
       // 2.Resetting state with about:blank  & 3.Navigating to blankPage
      await GatherRunner.loadBlank(driver);
     // 4. Benchmarking machine 
      const baseArtifacts = await GatherRunner.initializeBaseArtifacts(options);
      
      // ...processing benchmarkIndex

         // 5. Initializing…
      await GatherRunner.setupDriver(driver, options);
    
      let isFirstPass = true;
      // each pass
      for (const passConfig of passConfigs) {
        const passContext = {
          gatherMode: 'navigation',
          driver,
          url: options.requestedUrl,
          settings: options.settings,
          passConfig,
          baseArtifacts,
          computedCache: options.computedCache,
          LighthouseRunWarnings: baseArtifacts.LighthouseRunWarnings,
        };
 //Starting from about:blank, load the page and run gatherers for this pass. 
        const passResults = await GatherRunner.runPass(passContext);
        Object.assign(artifacts, passResults.artifacts);
    
        // If we encountered a pageLoadError, don't try to keep loading the page in future passes.
        if (passResults.pageLoadError && passConfig.loadFailureMode === 'fatal') {
          baseArtifacts.PageLoadError = passResults.pageLoadError;
          break;
        }
    
        if (isFirstPass) {
          await GatherRunner.populateBaseArtifacts(passContext);
          isFirstPass = false;
        }
      }
    
      await GatherRunner.disposeDriver(driver, options);
      return finalizeArtifacts(baseArtifacts, artifacts);
    } catch (err) {
      // Clean up on error. Don't await so that the root error, not a disposal error, is shown.
      GatherRunner.disposeDriver(driver, options);
    
      throw err;
    }
}

  _connectToSocket(response) {
    const url = response.webSocketDebuggerUrl;
    this._pageId = response.id;

    return new Promise((resolve, reject) => {
      const ws = new WebSocket(url, {
        perMessageDeflate: false,
      });
      ws.on('open', () => {
        this._ws = ws;
        resolve();
      });
      ws.on('message', data => this.handleRawMessage(/** @type {string} */ (data)));
      ws.on('close', this.dispose.bind(this));
      ws.on('error', reject);
    });
  }
  
  
  
   static async setupDriver(driver, options) {
    //...
    await GatherRunner.assertNoSameOriginServiceWorkerClients(session, options.requestedUrl);
 // 6. Preparing target for navigation mode,通过为全局 API 或错误处理启用协议域、仿真和新文档处理程序，准备在导航模式下分析的目标。 
    await prepare.prepareTargetForNavigationMode(driver, options.settings);
  }
  
  static async runPass(passContext) {
   //7. Running defaultPass pass

    const gathererResults = {};
    const {driver, passConfig} = passContext;

    // 8.Resetting state with about:blank 9.Navigating to about:blankGo to about:blank
 // set up

    await GatherRunner.loadBlank(driver, passConfig.blankPage);
 // 10.Preparing target for navigation ~ 13.Preparing network conditions
    const {warnings} = await prepare.prepareTargetForIndividualNavigation(
      driver.defaultSession,
      passContext.settings,
      {
        requestor: passContext.url,
        disableStorageReset: !passConfig.useThrottling,
        disableThrottling: !passConfig.useThrottling,
        blockedUrlPatterns: passConfig.blockedUrlPatterns,
      }
    );
    // run `startInstrumentation() /beforePass()` on gatherers.
    passContext.LighthouseRunWarnings.push(...warnings);
    await GatherRunner.beforePass(passContext, gathererResults);

    // 14.Beginning devtoolsLog and trace,
    //    await driver.beginDevtoolsLog(); await driver.beginTrace(settings);
    await GatherRunner.beginRecording(passContext);
     //15.Loading page & waiting for onload ,16.Navigating to https:XXX
    const {navigationError: possibleNavError} = await GatherRunner.loadPage(driver, passContext);
     //17.Gathering in-page: XXXXXXXX,run `pass()` on gatherers.
    await GatherRunner.pass(passContext, gathererResults);
    const loadData = await GatherRunner.endRecording(passContext);

     //18.Gathering trace 19.Gathering devtoolsLog & network records
    await emulation.clearThrottling(driver.defaultSession);

        //process page error

    // If no error, save devtoolsLog and trace.
    GatherRunner._addLoadDataToBaseArtifacts(passContext, loadData, passConfig.passName);

     //  20.Gathering XXX.  Run `afterPass()(stopInstrumentation -> getArtifact )` on gatherers and return collected artifacts. 
    await GatherRunner.afterPass(passContext, loadData, gathererResults);
    const artifacts = GatherRunner.collectArtifacts(gathererResults);

 
    return artifacts;
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.

{
    audits: [
        'first-contentful-paint',
        'byte-efficiency/uses-optimized-images',
    ]
}
1.
2.
3.
4.
5.
6.

async function legacyNavigation(url, flags = {}, configJSON, userConnection) {
    //... 
  return Runner.audit(artifacts, options);
}
  static async audit(artifacts, options) {

        //...
       //1. Analyzing and running audits &2.Auditing: XXX
      const auditResultsById = await Runner._runAudits(settings, config.audits, artifacts,
          lighthouseRunWarnings, computedCache);

   //3.Generating results...  
      if (artifacts.LighthouseRunWarnings) {
        lighthouseRunWarnings.push(...artifacts.LighthouseRunWarnings);
      }

      //....

  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

static async audit(artifacts, options) {
  
  //....
  //conclusion of the lighthouse result object
  const axeVersion = artifacts.Accessibility?.version;
      const credits = {
        'axe-core': axeVersion,
      }
      let categories = {};
      if (config.categories) {
        categories = ReportScoring.scoreAllCategories(config.categories, auditResultsById);
      }
      // Replace ICU message references with localized strings; save replaced paths in lhr.
      i18nLhr.i18n.icuMessagePaths = format.replaceIcuMessages(i18nLhr, settings.locale);
      // LHR has now been localized.
      const lhr = /** @type {LH.Result} */ (i18nLhr);
      if (settings.auditMode) {
        const path = Runner._getDataSavePath(settings);
        assetSaver.saveLhr(lhr, path);
      }
      // 生成报告
      const report = ReportGenerator.generateReport(lhr, settings.output);
      return {lhr, artifacts, report};
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.