Add measurePrepare param

index.html

@@ -83,7 +83,7 @@ <h1 class="section-header">Detailed Results</h1>
                     <div class="section-content all-metric-results">
                         <div class="aggregated-metric-result">
                             <h2>Aggregate Metric</h2>
-                            <div id="geomean-chart"></div>
+                            <div id="aggregate-chart"></div>
                             <h2>Test Metrics Overview</h2>
                             <div id="tests-chart"></div>
                         </div>

resources/developer-mode.mjs

@@ -18,6 +18,7 @@ export function createDeveloperModeContainer() {
     const settings = document.createElement("div");
     settings.className = "settings";
     settings.append(createUIForIterationCount());
+    settings.append(createUIForMeasurePrepare());
     settings.append(createUIForWarmupSuite());
     settings.append(createUIForWarmupBeforeSync());
     settings.append(createUIForSyncStepDelay());
@@ -44,6 +45,11 @@ function createUIForWarmupSuite() {
         params.useWarmupSuite = isChecked;
     });
 }
+function createUIForMeasurePrepare() {
+    return createCheckboxUI("Measure Prepare", params.measurePrepare, (isChecked) => {
+        params.measurePrepare = isChecked;
+    });
+}
 
 function createCheckboxUI(labelValue, initialValue, paramsUpdateCallback) {
     const checkbox = document.createElement("input");
@@ -255,7 +261,7 @@ function updateURL() {
         }
     }
 
-    const defaultParamKeys = ["iterationCount", "useWarmupSuite", "warmupBeforeSync", "waitBeforeSync"];
+    const defaultParamKeys = ["iterationCount", "useWarmupSuite", "warmupBeforeSync", "waitBeforeSync", "measurePrepare"];
     for (const paramKey of defaultParamKeys) {
         if (params[paramKey] !== defaultParams[paramKey])
             url.searchParams.set(paramKey, params[paramKey]);

resources/main.mjs

@@ -246,8 +246,9 @@ class MainBenchmarkClient {
         const trackHeight = 24;
         document.documentElement.style.setProperty("--metrics-line-height", `${trackHeight}px`);
         const plotWidth = (params.viewport.width - 120) / 2;
-        document.getElementById("geomean-chart").innerHTML = renderMetricView({
-            metrics: [metrics.Geomean],
+        const aggregateMetrics = [metrics.Geomean];
+        document.getElementById("aggregate-chart").innerHTML = renderMetricView({
+            metrics: aggregateMetrics,
             width: plotWidth,
             trackHeight,
             renderChildren: false,

resources/shared/params.mjs

@@ -25,6 +25,8 @@ export class Params {
     // "generate": generate a random seed
     // <integer>: use the provided integer as a seed
     shuffleSeed = "off";
+    // Measure more detailed debug metrics.
+    measurePrepare = false;
 
     constructor(searchParams = undefined) {
         if (searchParams)
@@ -54,6 +56,7 @@ export class Params {
         this.warmupBeforeSync = this._parseIntParam(searchParams, "warmupBeforeSync", 0);
         this.measurementMethod = this._parseMeasurementMethod(searchParams);
         this.shuffleSeed = this._parseShuffleSeed(searchParams);
+        this.measurePrepare = this._parseBooleanParam(searchParams, "measurePrepare");
 
         const unused = Array.from(searchParams.keys());
         if (unused.length > 0)

resources/suite-runner.mjs

@@ -8,6 +8,7 @@ export class SuiteRunner {
     #suite;
     #client;
     #suiteResults;
+    #prepareTime
 
     constructor(frame, page, params, suite, client, measuredValues) {
         // FIXME: Create SuiteRunner-local measuredValues.
@@ -21,6 +22,7 @@ export class SuiteRunner {
         this.#client = client;
         this.#suite = suite;
         this.#params = params;
+        this.#prepareTime = 0;
     }
 
     get frame() {
@@ -62,7 +64,8 @@ export class SuiteRunner {
         await this.#suite.prepare(this.#page);
         performance.mark(suitePrepareEndLabel);
 
-        performance.measure(`suite-${suiteName}-prepare`, suitePrepareStartLabel, suitePrepareEndLabel);
+        const entry = performance.measure(`suite-${suiteName}-prepare`, suitePrepareStartLabel, suitePrepareEndLabel);
+        this.#prepareTime = entry.duration;
     }
 
     async _runSuite() {
@@ -108,8 +111,10 @@ export class SuiteRunner {
         if (this.#suite === WarmupSuite)
             return;
 
-        const total = syncTime + asyncTime;
-        this.#suiteResults.tests[test.name] = { tests: { Sync: syncTime, Async: asyncTime }, total: total };
+        let total = syncTime + asyncTime;
+        if (this.#params.measurePrepare)
+            total += this.#prepareTime;
+        this.#suiteResults.tests[test.name] = { tests: { Sync: syncTime, Async: asyncTime, Prepare: this.#prepareTime }, total: total };
         this.#suiteResults.total += total;
     };