Refactor Chrome trace to get renderblocking (#1995)

sitespeedio · Sep 29, 2023 · 1273d4d · 1273d4d
1 parent 9c3cbbc
commit 1273d4d
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 88 deletions.
diff --git a/lib/chrome/webdriver/chromium.js b/lib/chrome/webdriver/chromium.js
@@ -15,11 +15,7 @@ import { parse } from '../traceCategoriesParser.js';
 import { pathToFolder } from '../../support/pathToFolder.js';
 import { ChromeDevtoolsProtocol } from '../chromeDevtoolsProtocol.js';
 import { Android, isAndroidConfigured } from '../../android/index.js';
-import {
-  getFirstContentFulPaintEvent,
-  getLargestContentfulPaintEvent,
-  getRecalculateStyleElementsAndTimeBefore
-} from './traceUtilities.js';
+import { getRenderBlocking } from './traceUtilities.js';
 const unlink = promisify(_unlink);
 const rm = promisify(_rm);
 
@@ -356,50 +352,19 @@ export class Chromium {
       result.cpu = cpu;
 
       // Collect render blocking info
-      const renderBlockingInfo = {};
-      const urlsWithBlockingInfo = trace.traceEvents.filter(
-        task =>
-          task.cat === 'devtools.timeline' &&
-          task.name === 'ResourceSendRequest' &&
-          task.args.data.url &&
-          task.args.data.renderBlocking
-      );
-      for (let asset of urlsWithBlockingInfo) {
-        renderBlockingInfo[asset.args.data.url] =
-          asset.args.data.renderBlocking;
-      }
-
-      const fcpEvent = getFirstContentFulPaintEvent(trace.traceEvents);
-      const lcpEvent = getLargestContentfulPaintEvent(trace.traceEvents);
-
-      result.renderBlocking = { recalculateStyle: {}, requests: {} };
-
-      if (fcpEvent) {
-        const beforeFCP = getRecalculateStyleElementsAndTimeBefore(
-          trace.traceEvents,
-          fcpEvent.ts
-        );
-        result.renderBlocking.recalculateStyle.beforeFCP = beforeFCP;
-      }
-
-      if (lcpEvent) {
-        const beforeLCP = getRecalculateStyleElementsAndTimeBefore(
-          trace.traceEvents,
-          lcpEvent.ts
-        );
-        result.renderBlocking.recalculateStyle.beforeLCP = beforeLCP;
-      }
+      const render = await getRenderBlocking(trace);
+      result.renderBlocking = render.renderBlocking;
 
       if (!this.options.skipHar) {
         for (let harRequest of this.hars[index - 1].log.entries) {
-          if (renderBlockingInfo[harRequest.request.url]) {
+          if (render.renderBlockingInfo[harRequest.request.url]) {
             harRequest._renderBlocking =
-              renderBlockingInfo[harRequest.request.url];
+              render.renderBlockingInfo[harRequest.request.url];
           }
         }
       }
 
-      result.renderBlocking.requests = renderBlockingInfo;
+      result.renderBlocking.requests = render.renderBlockingInfo;
     }
 
     // Google Web Vitals hacksery

diff --git a/lib/chrome/webdriver/traceUtilities.js b/lib/chrome/webdriver/traceUtilities.js
@@ -1,7 +1,7 @@
 import intel from 'intel';
 const log = intel.getLogger('browsertime.chrome');
 
-export function getLargestContentfulPaintEvent(traceEvents) {
+function getLargestContentfulPaintEvent(traceEvents) {
   const lcpCandidates = traceEvents.filter(
     task => task.name === 'largestContentfulPaint::Candidate'
   );
@@ -20,7 +20,7 @@ export function getLargestContentfulPaintEvent(traceEvents) {
   }
 }
 
-export function getFirstContentFulPaintEvent(traceEvents) {
+function getFirstContentFulPaintEvent(traceEvents) {
   // Get first contentful paint
   const fcpEvent = traceEvents.find(
     task => task.name === 'firstContentfulPaint'
@@ -33,10 +33,7 @@ export function getFirstContentFulPaintEvent(traceEvents) {
   }
 }
 
-export function getRecalculateStyleElementsAndTimeBefore(
-  traceEvents,
-  timestamp
-) {
+function getRecalculateStyleElementsAndTimeBefore(traceEvents, timestamp) {
   const recalculatesBefore = traceEvents.filter(
     task =>
       task.cat === 'disabled-by-default-devtools.timeline' &&
@@ -62,3 +59,41 @@ export function getRecalculateStyleElementsAndTimeBefore(
 
   return { elements, durationInMillis: duration / 1000 };
 }
+
+export async function getRenderBlocking(trace) {
+  const renderBlockingInfo = {};
+
+  const urlsWithBlockingInfo = trace.traceEvents.filter(
+    task =>
+      task.cat === 'devtools.timeline' &&
+      task.name === 'ResourceSendRequest' &&
+      task.args.data.url &&
+      task.args.data.renderBlocking
+  );
+  for (let asset of urlsWithBlockingInfo) {
+    renderBlockingInfo[asset.args.data.url] = asset.args.data.renderBlocking;
+  }
+
+  const fcpEvent = getFirstContentFulPaintEvent(trace.traceEvents);
+  const lcpEvent = getLargestContentfulPaintEvent(trace.traceEvents);
+
+  const renderBlocking = { recalculateStyle: {}, requests: {} };
+
+  if (fcpEvent) {
+    const beforeFCP = getRecalculateStyleElementsAndTimeBefore(
+      trace.traceEvents,
+      fcpEvent.ts
+    );
+    renderBlocking.recalculateStyle.beforeFCP = beforeFCP;
+  }
+
+  if (lcpEvent) {
+    const beforeLCP = getRecalculateStyleElementsAndTimeBefore(
+      trace.traceEvents,
+      lcpEvent.ts
+    );
+    renderBlocking.recalculateStyle.beforeLCP = beforeLCP;
+  }
+
+  return { renderBlockingInfo, renderBlocking };
+}
diff --git a/lib/core/engine/command/chromeTrace.js b/lib/core/engine/command/chromeTrace.js
@@ -1,10 +1,6 @@
 import intel from 'intel';
 
-import {
-  getFirstContentFulPaintEvent,
-  getLargestContentfulPaintEvent,
-  getRecalculateStyleElementsAndTimeBefore
-} from '../../../chrome/webdriver/traceUtilities.js';
+import { getRenderBlocking } from '../../../chrome/webdriver/traceUtilities.js';
 import { parse } from '../../../chrome/traceCategoriesParser.js';
 import { parseCPUTrace } from '../../../chrome/parseCpuTrace.js';
 const log = intel.getLogger('browsertime.command.chrometrace');
@@ -47,50 +43,18 @@ export class ChromeTrace {
         result.cpu = cpu;
 
         // Collect render blocking info
-        const renderBlockingInfo = {};
-        const urlsWithBlockingInfo = trace.traceEvents.filter(
-          task =>
-            task.cat === 'devtools.timeline' &&
-            task.name === 'ResourceSendRequest' &&
-            task.args.data.url &&
-            task.args.data.renderBlocking
-        );
-        for (let asset of urlsWithBlockingInfo) {
-          renderBlockingInfo[asset.args.data.url] =
-            asset.args.data.renderBlocking;
-        }
-
-        const fcpEvent = getFirstContentFulPaintEvent(trace.traceEvents);
-        const lcpEvent = getLargestContentfulPaintEvent(trace.traceEvents);
-
-        result.renderBlocking = { recalculateStyle: {}, requests: {} };
+        const render = await getRenderBlocking(trace);
 
-        if (fcpEvent) {
-          const beforeFCP = getRecalculateStyleElementsAndTimeBefore(
-            trace.traceEvents,
-            fcpEvent.ts
-          );
-          result.renderBlocking.recalculateStyle.beforeFCP = beforeFCP;
-        }
-
-        if (lcpEvent) {
-          const beforeLCP = getRecalculateStyleElementsAndTimeBefore(
-            trace.traceEvents,
-            lcpEvent.ts
-          );
-          result.renderBlocking.recalculateStyle.beforeLCP = beforeLCP;
-        }
+        result.renderBlocking = render.renderBlocking;
 
         if (!this.options.skipHar) {
           for (let harRequest of this.hars[this.index - 1].log.entries) {
-            if (renderBlockingInfo[harRequest.request.url]) {
+            if (render.renderBlockingInfo[harRequest.request.url]) {
               harRequest._renderBlocking =
-                renderBlockingInfo[harRequest.request.url];
+                render.renderBlockingInfo[harRequest.request.url];
             }
           }
         }
-
-        result.renderBlocking.requests = renderBlockingInfo;
       }
     } else {
       throw new Error('Trace only works in Chrome');