phantomas 2.0.0 → 2.4.0

package/modules/analyzeCss/analyzeCss.js

@@ -69,7 +69,7 @@ module.exports = function (phantomas) {
     return f + str.substr(1);
   }
 
-  function analyzeCss(css, context, callback) {
+  async function analyzeCss(css, context) {
     /**
 		// force JSON output format
 		options.push('--json');
@@ -94,90 +94,89 @@ module.exports = function (phantomas) {
 
     // https://www.npmjs.com/package/analyze-css#commonjs-module
     var options = {};
-
-    new analyzer(css, options, function (err, results) {
-      var offenderSrc = context || "[inline CSS]";
-
-      if (err !== null) {
-        phantomas.log("analyzeCss: sub-process failed! - %s", err);
-
-        // report failed CSS parsing (issue #494(
-        var offender = offenderSrc;
-        if (err.message) {
-          // Error object returned
-          if (err.message.indexOf("Unable to parse JSON string") > 0) {
-            offender += " (analyzeCss output error)";
-          }
-        } else {
-          // Error string returned (stderror)
-          if (
-            err.indexOf("CSS parsing failed") > 0 ||
-            err.indexOf("is an invalid expression") > 0
-          ) {
-            offender += " (" + err.trim() + ")";
-          } else if (err.indexOf("Empty CSS was provided") > 0) {
-            offender += " (Empty CSS was provided)";
-          }
+    let results;
+
+    try {
+      results = await analyzer(css, options);
+    } catch (err) {
+      phantomas.log("analyzeCss: sub-process failed! - %s", err);
+
+      // report failed CSS parsing (issue #494(
+      var offender = offenderSrc;
+      if (err.message) {
+        // Error object returned
+        if (err.message.indexOf("Unable to parse JSON string") > 0) {
+          offender += " (analyzeCss output error)";
+        }
+      } else {
+        // Error string returned (stderror)
+        if (
+          err.indexOf("CSS parsing failed") > 0 ||
+          err.indexOf("is an invalid expression") > 0
+        ) {
+          offender += " (" + err.trim() + ")";
+        } else if (err.indexOf("Empty CSS was provided") > 0) {
+          offender += " (Empty CSS was provided)";
         }
+      }
 
-        phantomas.incrMetric("cssParsingErrors");
-        phantomas.addOffender("cssParsingErrors", offender);
+      phantomas.incrMetric("cssParsingErrors");
+      phantomas.addOffender("cssParsingErrors", offender);
+      return;
+    }
 
-        callback();
-        return;
-      }
+    var offenderSrc = context || "[inline CSS]";
 
-      phantomas.log(
-        "Got results for %s from %s",
-        offenderSrc,
-        results.generator
-      );
+    phantomas.log("Got results for %s from %s", offenderSrc, results.generator);
 
-      var metrics = results.metrics || {},
-        offenders = results.offenders || {};
+    const metrics = results.metrics,
+      offenders = results.offenders;
 
-      Object.keys(metrics).forEach(function (metric) {
-        var metricPrefixed = "css" + ucfirst(metric);
+    Object.keys(metrics).forEach((metric) => {
+      var metricPrefixed = "css" + ucfirst(metric);
 
-        if (/Avg$/.test(metricPrefixed)) {
-          // update the average value (see #641)
-          phantomas.addToAvgMetric(metricPrefixed, metrics[metric]);
-        } else {
-          // increase metrics
-          phantomas.incrMetric(metricPrefixed, metrics[metric]);
-        }
+      if (/Avg$/.test(metricPrefixed)) {
+        // update the average value (see #641)
+        phantomas.addToAvgMetric(metricPrefixed, metrics[metric]);
+      } else {
+        // increase metrics
+        phantomas.incrMetric(metricPrefixed, metrics[metric]);
+      }
 
-        // and add offenders
-        if (typeof offenders[metric] !== "undefined") {
-          offenders[metric].forEach(function (msg) {
+      // and add offenders
+      if (typeof offenders[metric] !== "undefined") {
+        offenders[metric].forEach((offender) => {
+          phantomas.addOffender(metricPrefixed, {
+            url: offenderSrc,
+            value: {
+              message: offender.message,
+              position: {
+                ...offender.position,
+                source: offender.source || "undefined",
+              }, // cast to object
+            },
+          });
+        });
+      }
+      // add more offenders (#578)
+      else {
+        switch (metricPrefixed) {
+          case "cssLength":
+          case "cssRules":
+          case "cssSelectors":
+          case "cssDeclarations":
+          case "cssNotMinified":
+          case "cssSelectorLengthAvg":
+          case "cssSpecificityIdAvg":
+          case "cssSpecificityClassAvg":
+          case "cssSpecificityTagAvg":
             phantomas.addOffender(metricPrefixed, {
               url: offenderSrc,
-              value: msg,
+              value: metrics[metric],
             });
-          });
-        }
-        // add more offenders (#578)
-        else {
-          switch (metricPrefixed) {
-            case "cssLength":
-            case "cssRules":
-            case "cssSelectors":
-            case "cssDeclarations":
-            case "cssNotMinified":
-            case "cssSelectorLengthAvg":
-            case "cssSpecificityIdAvg":
-            case "cssSpecificityClassAvg":
-            case "cssSpecificityTagAvg":
-              phantomas.addOffender(metricPrefixed, {
-                url: offenderSrc,
-                value: metrics[metric],
-              });
-              break;
-          }
+            break;
         }
-      });
-
-      callback();
+      }
     });
   }
 
@@ -195,19 +194,23 @@ module.exports = function (phantomas) {
 
   // ok, now let's analyze the collect CSS
   phantomas.on("beforeClose", () => {
-    var promises = [];
+    const promises = [];
 
     stylesheets.forEach((entry) => {
       promises.push(
         new Promise(async (resolve) => {
-          var css = entry.inline;
+          let css = entry.inline;
           phantomas.log("Analyzing %s", entry.url || "inline CSS");
 
           if (entry.content) {
             css = await entry.content();
           }
 
-          analyzeCss(css, entry.url, resolve);
+          if (css) {
+            await analyzeCss(css, entry.url);
+          }
+
+          resolve();
         })
       );
     });

package/modules/analyzeCss/scope.js

@@ -1,4 +1,4 @@
-(function (phantomas) {
+(function analyzeCssScope(phantomas) {
   document.addEventListener("DOMContentLoaded", function () {
     // both DOM and CSSOM are constructed, no stylesheets are blocking JavaScript execution
     phantomas.spyEnabled(false, "Checking inline scripts");

package/modules/blockDomains/blockDomains.js

@@ -6,8 +6,6 @@
 "use strict";
 
 module.exports = function (phantomas) {
-  const { parse } = require("url");
-
   var ourDomain,
     // --no-externals
     noExternalsMode = phantomas.getParam("no-externals") === true,
@@ -18,7 +16,7 @@ module.exports = function (phantomas) {
     blockedDomains = phantomas.getParam("block-domain"),
     blockedDomainsRegExp;
 
-  ourDomain = parse(phantomas.getParam("url")).hostname;
+  ourDomain = new URL(phantomas.getParam("url")).hostname;
 
   phantomas.setMetric("blockedRequests"); // @desc number of requests blocked due to domain filtering @optional
 
@@ -76,27 +74,29 @@ module.exports = function (phantomas) {
     blockedDomainsRegExp = new RegExp("(" + blockedDomains.join("|") + ")$");
   }
 
-  // https://github.com/GoogleChrome/puppeteer/blob/v1.11.0/docs/api.md#pagesetrequestinterceptionvalue
-  phantomas.on("init", async (page) => {
-    await page.setRequestInterception(true);
+  if (noExternalsMode || allowedDomains !== false || blockedDomains !== false) {
+    // https://github.com/GoogleChrome/puppeteer/blob/v1.11.0/docs/api.md#pagesetrequestinterceptionvalue
+    phantomas.on("init", async (page) => {
+      await page.setRequestInterception(true);
 
-    page.on("request", (interceptedRequest) => {
-      const url = interceptedRequest.url(),
-        domain = parse(url).hostname;
+      page.on("request", (interceptedRequest) => {
+        const url = interceptedRequest.url(),
+          domain = new URL(url).hostname;
 
-      if (checkBlock(domain)) {
-        interceptedRequest.abort();
+        if (checkBlock(domain)) {
+          interceptedRequest.abort();
 
-        phantomas.log("Request has been blocked: <%s>", url);
+          phantomas.log("Request has been blocked: <%s>", url);
 
-        // stats
-        phantomas.incrMetric("blockedRequests");
-        phantomas.addOffender("blockedRequests", url);
-      } else {
-        interceptedRequest.continue();
-      }
-    });
+          // stats
+          phantomas.incrMetric("blockedRequests");
+          phantomas.addOffender("blockedRequests", url);
+        } else {
+          interceptedRequest.continue();
+        }
+      });
 
-    phantomas.log("Requests intercepting enabled");
-  });
+      phantomas.log("Requests intercepting enabled");
+    });
+  }
 };

package/modules/cacheHits/cacheHits.js

@@ -9,15 +9,18 @@ module.exports = function (phantomas) {
   phantomas.setMetric("cachePasses"); // @desc number of cache passes @offenders
 
   phantomas.on("recv", (entry) => {
-    var age, xCacheHeader, isHit, isMiss, isPass;
+    let isHit, isMiss, isPass;
 
     // parser response headers
     //
     // X-Cache:HIT, HIT
     // X-Cache:arsenic miss (0)
     // Age: 170221
-    age = parseInt(entry.headers.Age, 10);
-    xCacheHeader = (entry.headers["X-Cache"] || "").toLowerCase();
+    const age =
+        typeof entry.headers.Age !== "undefined"
+          ? parseInt(entry.headers.Age, 10)
+          : undefined,
+      xCacheHeader = (entry.headers["X-Cache"] || "").toLowerCase();
 
     if (xCacheHeader !== "") {
       isHit = xCacheHeader.indexOf("hit") > -1;

package/modules/cpuTasks/cpuTasks.js

@@ -0,0 +1,22 @@
+/**
+ * Retrieves stats about layouts, style recalcs and JS execution
+ *
+ * Metrics from https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pagemetrics
+ */
+"use strict";
+
+module.exports = function (phantomas) {
+  // Converts seconds into milliseconds
+  function ms(value) {
+    return Math.round(value * 1000);
+  }
+
+  phantomas.on("metrics", (metrics) => {
+    phantomas.setMetric("layoutCount", metrics.LayoutCount); // @desc total number of full or partial page layout
+    phantomas.setMetric("layoutDuration", ms(metrics.LayoutDuration)); // @desc combined durations of all page layouts
+    phantomas.setMetric("recalcStyleCount", metrics.RecalcStyleCount); // @desc total number of page style recalculations
+    phantomas.setMetric("recalcStyleDuration", ms(metrics.RecalcStyleDuration)); // @desc combined duration of style recalculations
+    phantomas.setMetric("scriptDuration", ms(metrics.ScriptDuration)); // @desc combined duration of JavaScript execution
+    phantomas.setMetric("taskDuration", ms(metrics.TaskDuration)); // @desc combined duration of all tasks performed by the browser
+  });
+};

package/modules/documentHeight/scope.js

@@ -1,4 +1,4 @@
-(function (phantomas) {
+(function documentHeightScope(phantomas) {
   document.addEventListener("DOMContentLoaded", () => {
     // @see https://github.com/HTTPArchive/httparchive/blob/master/custom_metrics/document_height.js
     var doc = document,

package/modules/domComplexity/scope.js

@@ -1,4 +1,4 @@
-(function (phantomas) {
+(function domComplexityScope(phantomas) {
   phantomas.spyEnabled(false, "initializing domComplexity metrics");
 
   window.addEventListener("load", () => {

package/modules/domHiddenContent/scope.js

@@ -1,4 +1,4 @@
-(function (phantomas) {
+(function domHiddenContentScope(phantomas) {
   phantomas.spyEnabled(false, "initializing hidden content analysis");
 
   window.addEventListener("load", () => {

package/modules/domMutations/scope.js

@@ -1,4 +1,4 @@
-(function (phantomas) {
+(function DOMmutationsScope(phantomas) {
   if ("MutationObserver" in window) {
     // wait for DOM ready
     document.addEventListener("readystatechange", function () {

package/modules/domQueries/domQueries.js

@@ -19,27 +19,24 @@ module.exports = (phantomas) => {
   //
 
   // report DOM queries that return no results (issue #420)
-  phantomas.on("domQuery", function (
-    type,
-    query,
-    fnName,
-    context,
-    hasNoResults
-  ) {
-    // ignore DOM queries within DOM fragments (used internally by jQuery)
-    if (context.indexOf("body") !== 0 && context.indexOf("#document") !== 0) {
-      return;
-    }
+  phantomas.on(
+    "domQuery",
+    function (type, query, fnName, context, hasNoResults) {
+      // ignore DOM queries within DOM fragments (used internally by jQuery)
+      if (context.indexOf("body") !== 0 && context.indexOf("#document") !== 0) {
+        return;
+      }
 
-    if (hasNoResults === true) {
-      phantomas.incrMetric("DOMqueriesWithoutResults");
-      phantomas.addOffender("DOMqueriesWithoutResults", {
-        query,
-        node: context,
-        function: fnName,
-      });
+      if (hasNoResults === true) {
+        phantomas.incrMetric("DOMqueriesWithoutResults");
+        phantomas.addOffender("DOMqueriesWithoutResults", {
+          query,
+          node: context,
+          function: fnName,
+        });
+      }
     }
-  });
+  );
 
   // count DOM queries by either ID, tag name, class name and selector query
   // @see https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-doctype

package/modules/domQueries/scope.js

@@ -1,4 +1,4 @@
-(function (phantomas) {
+(function domQueriesScope(phantomas) {
   phantomas.log("domQueries: initializing page scope code");
 
   function querySpy(type, query, fnName, context, hasNoResults) {

package/modules/domains/domains.js

@@ -3,7 +3,7 @@
  */
 "use strict";
 
-const Stats = require("../../lib/fast-stats").Stats;
+const Stats = require("fast-stats").Stats;
 
 module.exports = function (phantomas) {
   var Collection = require("../../lib/collection"),

package/modules/events/scope.js

@@ -1,4 +1,5 @@
-(function (phantomas) {
+/* istanbul ignore next */
+(function eventsScope(phantomas) {
   // spy calls to EventTarget.addEventListener
   // @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
   function eventSpy(eventType) {

package/modules/globalVariables/scope.js

@@ -1,4 +1,4 @@
-(function (phantomas) {
+(function globalVariablesScope(phantomas) {
   // get the list of initial, built-in global variables
   var allowed = [],
     varName;

package/modules/jQuery/scope.js

@@ -1,4 +1,4 @@
-(function (phantomas) {
+(function jQueryScope(phantomas) {
   // read & write DOM operations (issue #436)
   function spyReadsAndWrites(jQuery) {
     var TYPE_SET = "write",

package/modules/javaScriptBottlenecks/scope.js

@@ -1,4 +1,4 @@
-(async (phantomas) => {
+(async function javaScriptBottlenecksScope(phantomas) {
   // spy calls to eval only when requested (issue #467)
   var spyEval = (await phantomas.getParam("spy-eval")) === true;
 

package/modules/lazyLoadableImages/scope.js

@@ -1,10 +1,10 @@
-((phantomas) => {
+(function lazyLoadableImages(phantomas) {
   phantomas.spyEnabled(
     false,
     "setting up which images can be lazy-loaded analysis"
   );
 
-  window.addEventListener("beforeunload", () => {
+  window.addEventListener("load", () => {
     phantomas.spyEnabled(false, "analyzing which images can be lazy-loaded");
 
     var images = document.body.getElementsByTagName("img"),

package/modules/localStorage/scope.js

@@ -1,4 +1,4 @@
-(function (phantomas) {
+(function localStorageScope(phantomas) {
   window.addEventListener("load", () => {
     try {
       var entries = Object.keys(window.localStorage);

package/modules/protocols/protocols.js

@@ -0,0 +1,101 @@
+/**
+ * Checks versions of HTTP and TLS protocols
+ */
+"use strict";
+
+module.exports = function (phantomas) {
+  var domains = new Map(),
+    mainDomain = undefined,
+    beforeDomReady = true;
+
+  phantomas.setMetric("mainDomainHttpProtocol"); // @desc HTTP protocol used by the main domain [string]
+  phantomas.setMetric("oldHttpProtocol"); // @desc number of domains using HTTP/1.0 or 1.1
+  phantomas.setMetric("mainDomainTlsProtocol"); // @desc TLS protocol used by the main domain [string]
+  phantomas.setMetric("oldTlsProtocol"); // @desc number of domains using TLS 1.1 or 1.2
+
+  // spy all requests
+  phantomas.on("recv", (entry) => {
+    if (entry.domain) {
+      var domain = (entry.isSSL ? "https://" : "http://") + entry.domain;
+
+      if (domains.size === 0) {
+        mainDomain = domain;
+        phantomas.log("Our main domain is now %s", mainDomain);
+      }
+
+      if (domain == mainDomain) {
+        // our first request represents the main domain
+        // h3 protocol is used for subsequent requests for the same domain
+        // we need to keep updating these metrics on each response we get
+        phantomas.setMetric("mainDomainHttpProtocol", entry.httpVersion);
+        phantomas.setMetric("mainDomainTlsProtocol", entry.tlsVersion);
+      }
+
+      if (!domains.has(domain)) {
+        phantomas.log(
+          "New domain %s uses HTTP version %s and TLS version %s",
+          domain,
+          entry.httpVersion,
+          entry.tlsVersion
+        );
+
+        // add the new domain to the Map
+        domains.set(domain, {
+          requests: 1,
+          httpVersion: entry.httpVersion,
+          tlsVersion: entry.tlsVersion,
+          beforeDomReady: beforeDomReady,
+        });
+      } else {
+        // just increment the number of requests
+        domains.get(domain).requests++;
+
+        // h3 protocol is used for subsequent requests for the same domain
+        // initial ones are performed using h2
+        domains.get(domain).httpVersion = entry.httpVersion;
+        domains.get(domain).tlsVersion = entry.tlsVersion;
+      }
+    }
+  });
+
+  // listen to DOM Ready
+  phantomas.on("milestone", (name) => {
+    if (name === "domReady") {
+      beforeDomReady = false;
+    }
+  });
+
+  // set metrics
+  phantomas.on("report", () => {
+    domains.forEach(function (value, key) {
+      // As of 2020, h2 is the latest protocol, h3 is coming in 2021
+      if (value.httpVersion.indexOf("http/1") === 0) {
+        phantomas.incrMetric("oldHttpProtocol");
+        phantomas.addOffender("oldHttpProtocol", {
+          domain: key,
+          httpVersion: value.httpVersion,
+          requests: value.requests, // the more requests, the more h2 is important
+        });
+      }
+
+      // As of 2020, TLS 1.3 is the latest protocol and it brings speed improvements over 1.2
+      if (value.tlsVersion) {
+        // parse version number
+        var tlsVersion =
+          value.tlsVersion === "QUIC"
+            ? "quic"
+            : parseFloat(value.tlsVersion.substring(4));
+        phantomas.log(`tlsVersion for ${key} domain is ${tlsVersion}`);
+
+        if (tlsVersion !== "quic" && tlsVersion < 1.3) {
+          phantomas.incrMetric("oldTlsProtocol");
+          phantomas.addOffender("oldTlsProtocol", {
+            domain: key,
+            tlsVersion: value.tlsVersion,
+            beforeDomReady: value.beforeDomReady, // identifies the most critical domains
+          });
+        }
+      }
+    });
+  });
+};

package/modules/requestsStats/requestsStats.js

@@ -12,7 +12,7 @@
  */
 "use strict";
 
-var Stats = require("../../lib/fast-stats").Stats;
+var Stats = require("fast-stats").Stats;
 
 module.exports = function (phantomas) {
   var stack = {};

package/modules/staticAssets/staticAssets.js

@@ -11,7 +11,8 @@ module.exports = function (phantomas) {
     assetsReqCounter = new Collection(),
     cookieDomains = new Collection(),
     // TODO: use 3pc database with tracking services
-    trackingUrls = /google-analytics.com\/__utm.gif|pixel.quantserve.com\/pixel/;
+    trackingUrls =
+      /google-analytics.com\/__utm.gif|pixel.quantserve.com\/pixel/;
 
   phantomas.setMetric("assetsNotGzipped"); // @desc number of static assets that were not gzipped
   phantomas.setMetric("assetsWithQueryString"); // @desc number of static assets requested with query string (e.g. ?foo) in URL

package/modules/windowPerformance/windowPerformance.js

@@ -25,6 +25,7 @@ module.exports = function (phantomas) {
   phantomas.setMetric("timeFrontend"); // @desc time to window.load compared to the total loading time [%]
 
   phantomas.on("beforeClose", async function () {
+    /* istanbul ignore next */
     const timing = await phantomas.evaluate(() => {
       return window.performance.timing.toJSON();
     });