Skip to content

Latest commit

 

History

History
59 lines (43 loc) · 2.78 KB

architecture.md

File metadata and controls

59 lines (43 loc) · 2.78 KB
Raw

Architecture

Some incomplete notes

Components

  • Driver - Interfaces with Chrome Debugging Protocol (API viewer)
  • Gatherers - Requesting data from the browser (and maybe post-processing)
  • Artifacts - The output of gatherers
  • Audits - Non-performance evaluations of capabilities and issues. Includes a raw value and score of that value.
  • Metrics - Performance metrics summarizing the UX
  • Aggregations - Pulling audit results, grouping into user-facing components (eg. install_to_homescreen) and applying weighting and overall scoring.

Internal module graph

graph of lighthouse-core module dependencies

npm install -g js-vd; vd --exclude "node_modules|third_party|fs|path|url|log" lighthouse-core/ > graph.html

Protocol

  • Interacting with Chrome: The Chrome protocol connection maintained via WebSocket for the CLI chrome.debuggger API when in the Chrome extension.
  • Event binding & domains: Some domains must be enable()d so they issue events. Once enabled, they flush any events that represent state. As such, network events will only issue after the domain is enabled. All the protocol agents resolve their Domain.enable() callback after they have flushed any pending events. See example:
// will NOT work
driver.sendCommand('Security.enable').then(_ => {
  driver.on('Security.securityStateChanged', state => { /* ... */ });
})

// WILL work! happy happy. :)
driver.on('Security.securityStateChanged', state => { /* ... */ }); // event binding is synchronous
driver.sendCommand('Security.enable');

Gatherers

  • Reading the DOM: We prefer reading the DOM right from the browser (See #77). The driver exposes a querySelector method that can be used along with a getAttribute method to read values.

Audits

The return value of each audit takes this shape:

Promise.resolve({
  name: 'audit-name',
  description: 'whatnot',
  // value: The score. Typically a boolean, but can be number 0-100
  value: 0,
  // rawValue: Could be anything, as long as it can easily be stringified and displayed,
  //   e.g. 'your score is bad because you wrote ${rawValue}'
  rawValue: {},
  // debugString: Some *specific* error string for helping the user figure out why they failed here.
  //   The reporter can handle *general* feedback on how to fix, e.g. links to the docs
  debugString: 'Your manifest 404ed',
});