core(legacy-javascript): make opportunity

lighthouse-core/audits/byte-efficiency/byte-efficiency-audit.js

@@ -9,6 +9,7 @@ const Audit = require('../audit.js');
 const linearInterpolation = require('../../lib/statistics.js').linearInterpolation;
 const Interactive = require('../../computed/metrics/lantern-interactive.js');
 const i18n = require('../../lib/i18n/i18n.js');
+const NetworkAnalyzer = require('../../lib/dependency-graph/simulator/network-analyzer.js');
 const NetworkRecords = require('../../computed/network-records.js');
 const LoadSimulator = require('../../computed/load-simulator.js');
 const PageDependencyGraph = require('../../computed/page-dependency-graph.js');
@@ -38,7 +39,7 @@ const WASTED_MS_FOR_SCORE_OF_ZERO = 5000;
  * @overview Used as the base for all byte efficiency audits. Computes total bytes
  *    and estimated time saved. Subclass and override `audit_` to return results.
  */
-class UnusedBytes extends Audit {
+class ByteEfficiencyAudit extends Audit {
   /**
    * Creates a score based on the wastedMs value using linear interpolation between control points.
    *
@@ -216,7 +217,7 @@ class UnusedBytes extends Audit {
       displayValue,
       numericValue: wastedMs,
       numericUnit: 'millisecond',
-      score: UnusedBytes.scoreForWastedMs(wastedMs),
+      score: ByteEfficiencyAudit.scoreForWastedMs(wastedMs),
       extendedInfo: {
         value: {
           wastedMs,
@@ -228,6 +229,37 @@ class UnusedBytes extends Audit {
     };
   }
 
+  /**
+   * Convert bytes to transfer size estimation.
+   * @param {LH.Artifacts} artifacts
+   * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+   * @param {Map<string, number>} wastedBytesByUrl
+   */
+  static async convertWastedResourceBytesToTransferBytes(artifacts, networkRecords, wastedBytesByUrl) {
+    const mainDocumentRecord = await NetworkAnalyzer.findMainDocument(networkRecords);
+    for (const [url, bytes] of wastedBytesByUrl.entries()) {
+      const networkRecord = url === artifacts.URL.finalUrl ?
+        mainDocumentRecord :
+        networkRecords.find(n => n.url === url);
+      const script = artifacts.ScriptElements.find(script => script.src === url);
+      if (!script || script.content === null) {
+        // This should never happen because we found the wasted bytes from bundles, which required contents in a ScriptElement.
+        continue;
+      }
+      if (!networkRecord) {
+        // This should never happen because we either have a network request for the main document (inline scripts),
+        // or the ScriptElement if for an external resource and so should have a network request.
+        continue;
+      }
+
+      const contentLength = script.content.length;
+      const transferSize =
+        ByteEfficiencyAudit.estimateTransferSize(networkRecord, contentLength, 'Script');
+      const transferRatio = transferSize / contentLength;
+      wastedBytesByUrl.set(url, bytes * transferRatio);
+    }
+  }
+
   /* eslint-disable no-unused-vars */
 
   /**
@@ -243,4 +275,4 @@ class UnusedBytes extends Audit {
   /* eslint-enable no-unused-vars */
 }
 
-module.exports = UnusedBytes;
+module.exports = ByteEfficiencyAudit;

lighthouse-core/audits/byte-efficiency/duplicated-javascript.js

@@ -7,7 +7,6 @@
 
 const ByteEfficiencyAudit = require('./byte-efficiency-audit.js');
 const ModuleDuplication = require('../../computed/module-duplication.js');
-const NetworkAnalyzer = require('../../lib/dependency-graph/simulator/network-analyzer.js');
 const i18n = require('../../lib/i18n/i18n.js');
 
 const UIStrings = {
@@ -187,29 +186,7 @@ class DuplicatedJavascript extends ByteEfficiencyAudit {
       items.push(otherItem);
     }
 
-    // Convert bytes to transfer size estimation.
-    const mainDocumentRecord = await NetworkAnalyzer.findMainDocument(networkRecords);
-    for (const [url, bytes] of wastedBytesByUrl.entries()) {
-      const networkRecord = url === artifacts.URL.finalUrl ?
-        mainDocumentRecord :
-        networkRecords.find(n => n.url === url);
-      const script = artifacts.ScriptElements.find(script => script.src === url);
-      if (!script || script.content === null) {
-        // This should never happen because we found the wasted bytes from bundles, which required contents in a ScriptElement.
-        continue;
-      }
-      if (!networkRecord) {
-        // This should never happen because we either have a network request for the main document (inline scripts),
-        // or the ScriptElement if for an external resource and so should have a network request.
-        continue;
-      }
-
-      const contentLength = script.content.length;
-      const transferSize =
-        ByteEfficiencyAudit.estimateTransferSize(networkRecord, contentLength, 'Script');
-      const transferRatio = transferSize / contentLength;
-      wastedBytesByUrl.set(url, bytes * transferRatio);
-    }
+    await this.convertWastedResourceBytesToTransferBytes(artifacts, networkRecords, wastedBytesByUrl);
 
     /** @type {LH.Audit.Details.OpportunityColumnHeading[]} */
     const headings = [

lighthouse-core/audits/legacy-javascript.js → lighthouse-core/audits/byte-efficiency/legacy-javascript.js

@@ -15,11 +15,10 @@
 /** @typedef {{name: string, expression: string}} Pattern */
 /** @typedef {{name: string, line: number, column: number}} PatternMatchResult */
 
-const Audit = require('./audit.js');
-const NetworkRecords = require('../computed/network-records.js');
-const JSBundles = require('../computed/js-bundles.js');
-const i18n = require('../lib/i18n/i18n.js');
-const thirdPartyWeb = require('../lib/third-party-web.js');
+const ByteEfficiencyAudit = require('./byte-efficiency-audit.js');
+const JsBundles = require('../../computed/js-bundles.js');
+const i18n = require('../../lib/i18n/i18n.js');
+const thirdPartyWeb = require('../../lib/third-party-web.js');
 
 const UIStrings = {
   /** Title of a Lighthouse audit that tells the user about legacy polyfills and transforms used on the page. This is displayed in a list of audit titles that Lighthouse generates. */
@@ -97,17 +96,17 @@ class CodePatternMatcher {
   }
 }
 
-class LegacyJavascript extends Audit {
+class LegacyJavascript extends ByteEfficiencyAudit {
   /**
    * @return {LH.Audit.Meta}
    */
   static get meta() {
     return {
       id: 'legacy-javascript',
-      scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
       description: str_(UIStrings.description),
       title: str_(UIStrings.title),
-      requiredArtifacts: ['devtoolsLogs', 'ScriptElements', 'SourceMaps', 'URL'],
+      requiredArtifacts: ['devtoolsLogs', 'traces', 'ScriptElements', 'SourceMaps', 'URL'],
     };
   }
 
@@ -348,18 +347,89 @@ class LegacyJavascript extends Audit {
     return urlToMatchResults;
   }
 
+  /**
+   * @param {PatternMatchResult[]} matches
+   */
+  static estimateWastedBytes(matches) {
+    const polyfillSignals = matches.filter(m => !m.name.startsWith('@')).map(m => m.name);
+    const transformSignals = matches.filter(m => m.name.startsWith('@')).map(m => m.name);
+
+    // experimenting.
+    const POLYFILL_USE_GRAPH = true;
+
+    let estimatedWastedBytesFromPolyfills = 0;
+    if (POLYFILL_USE_GRAPH) {
+      // TODO
+      const graph = require('./polyfill-graph-data.json');
+      const modulesSeen = new Set();
+      for (const polyfillSignal of polyfillSignals) {
+        // @ts-ignore: lacking index type.
+        const modules = graph.dependencies[polyfillSignal];
+        for (const module of modules) {
+          modulesSeen.add(module);
+        }
+      }
+
+      if (polyfillSignals.length > 0) estimatedWastedBytesFromPolyfills += graph.baseSize;
+      estimatedWastedBytesFromPolyfills += graph.baseSize;
+      estimatedWastedBytesFromPolyfills += [...modulesSeen].reduce((acc, module) => {
+        return acc + graph.moduleSizes[module];
+      }, 0);
+      // Not needed?
+      estimatedWastedBytesFromPolyfills =
+        Math.min(estimatedWastedBytesFromPolyfills, graph.maxSize);
+    } else {
+      const typedArrayPolyfills = [
+        'Float32Array',
+        'Float64Array',
+        'Int16Array',
+        'Int32Array',
+        'Int8Array',
+        'Uint16Array',
+        'Uint32Array',
+        'Uint8Array',
+        'Uint8ClampedArray',
+      ];
+      const typedArrayCount = typedArrayPolyfills.filter(p => polyfillSignals.includes(p)).length;
+
+      const POLYFILL_MAX_WASTE = 175764;
+      const POLYFILL_TYPED_WASTE = 40 * 1000; // ~60KiB, minus the base 20.
+      const POLYFILL_BASE_SIZE = 20 * 1000;
+
+      if (typedArrayCount > 0) estimatedWastedBytesFromPolyfills += POLYFILL_TYPED_WASTE;
+      if (polyfillSignals.length > 0) estimatedWastedBytesFromPolyfills += POLYFILL_BASE_SIZE;
+      // Linear estimation of non-typed polyfills (and minus one to exclude the base size above).
+      estimatedWastedBytesFromPolyfills += (polyfillSignals.length - typedArrayCount - 1)
+        * (POLYFILL_MAX_WASTE - POLYFILL_TYPED_WASTE - POLYFILL_BASE_SIZE)
+        / (this.getPolyfillData().length - typedArrayPolyfills.length - 1);
+      estimatedWastedBytesFromPolyfills =
+        Math.min(estimatedWastedBytesFromPolyfills, POLYFILL_MAX_WASTE);
+    }
+
+    const estimatedWastedBytesFromTransforms = 0;
+    // TODO
+
+    const estimatedWastedBytes =
+      estimatedWastedBytesFromPolyfills + estimatedWastedBytesFromTransforms;
+    return estimatedWastedBytes;
+  }
+
   /**
    * @param {LH.Artifacts} artifacts
+   * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
    * @param {LH.Audit.Context} context
-   * @return {Promise<LH.Audit.Product>}
+   * @return {Promise<ByteEfficiencyAudit.ByteEfficiencyProduct>}
    */
-  static async audit(artifacts, context) {
-    const devtoolsLog = artifacts.devtoolsLogs[LegacyJavascript.DEFAULT_PASS];
-    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
-    const bundles = await JSBundles.request(artifacts, context);
+  static async audit_(artifacts, networkRecords, context) {
+    const mainDocumentEntity = thirdPartyWeb.getEntity(artifacts.URL.finalUrl);
+    const bundles = await JsBundles.request(artifacts, context);
+
+    /**
+     * @typedef {LH.Audit.ByteEfficiencyItem & {signals: string[], locations: LH.Audit.Details.SourceLocationValue[]}} Item
+     */
 
-    /** @type {Array<{url: string, signals: string[], locations: LH.Audit.Details.SourceLocationValue[]}>} */
-    const tableRows = [];
+    /** @type {Item[]} */
+    const items = [];
     let signalCount = 0;
 
     // TODO(cjamcl): Use SourceMaps, and only pattern match if maps are not available.
@@ -371,8 +441,21 @@ class LegacyJavascript extends Audit {
     const urlToMatchResults =
       this.detectAcrossScripts(matcher, artifacts.ScriptElements, networkRecords, bundles);
     urlToMatchResults.forEach((matches, url) => {
-      /** @type {typeof tableRows[number]} */
-      const row = {url, signals: [], locations: []};
+      // Only estimate savings if first party code has legacy code.
+      let wastedBytes = 0;
+      if (thirdPartyWeb.isFirstParty(url, mainDocumentEntity)) {
+        wastedBytes = this.estimateWastedBytes(matches);
+      }
+
+      /** @type {typeof items[number]} */
+      const row = {
+        url,
+        signals: [],
+        locations: [],
+        wastedBytes,
+        // Not needed, but keeps typescript happy.
+        totalBytes: 0,
+      };
       for (const match of matches) {
         const {name, line, column} = match;
         row.signals.push(name);
@@ -384,31 +467,32 @@ class LegacyJavascript extends Audit {
           urlProvider: 'network',
         });
       }
-      tableRows.push(row);
+      items.push(row);
       signalCount += row.signals.length;
     });
 
-    /** @type {LH.Audit.Details.Table['headings']} */
+    // /** @type {Map<string, number>} */
+    // const wastedBytesByUrl = new Map();
+    // for (const row of items) {
+    //   // Only estimate savings if first party code has legacy code.
+    //   if (!thirdPartyWeb.isFirstParty(row.url, mainDocumentEntity)) {
+    //     continue;
+    //   }
+    // }
+    // await this.convertWastedResourceBytesToTransferBytes(artifacts, networkRecords, wastedBytesByUrl);
+
+    /** @type {LH.Audit.Details.OpportunityColumnHeading[]} */
     const headings = [
       /* eslint-disable max-len */
-      {key: 'url', itemType: 'url', subRows: {key: 'locations', itemType: 'source-location'}, text: str_(i18n.UIStrings.columnURL)},
-      {key: null, itemType: 'code', subRows: {key: 'signals'}, text: ''},
+      {key: 'url', valueType: 'url', subRows: {key: 'locations', valueType: 'source-location'}, label: str_(i18n.UIStrings.columnURL)},
+      {key: null, valueType: 'code', subRows: {key: 'signals'}, label: ''},
+      {key: 'wastedBytes', valueType: 'bytes', granularity: 0.05, label: str_(i18n.UIStrings.columnWastedBytes)},
       /* eslint-enable max-len */
     ];
-    const details = Audit.makeTableDetails(headings, tableRows);
 
-    // Only fail if first party code has legacy code.
-    const mainDocumentEntity = thirdPartyWeb.getEntity(artifacts.URL.finalUrl);
-    const foundSignalInFirstPartyCode = tableRows.some(row => {
-      return thirdPartyWeb.isFirstParty(row.url, mainDocumentEntity);
-    });
     return {
-      score: foundSignalInFirstPartyCode ? 0 : 1,
-      notApplicable: !foundSignalInFirstPartyCode,
-      extendedInfo: {
-        signalCount,
-      },
-      details,
+      items,
+      headings,
     };
   }
 }