feat: add TBT/frameDuration metrics and new perf test scenarios (#9910)

## Summary

Adds Total Blocking Time (TBT) and frame duration metrics to the
performance testing infrastructure, plus three new test scenarios
covering zoom, pan, and many-nodes-idle.

## Changes

### New Metrics
- **`totalBlockingTimeMs`** — Computed from PerformanceObserver
`longtask` entries: `sum(duration - 50ms)` for tasks >50ms. Measures
main thread blocking.
- **`frameDurationMs`** — Average frame duration via rAF timing (16.67ms
= 60fps target). Measures rendering smoothness.

### New Test Scenarios
| Scenario | Description |
|---|---|
| `canvas-zoom-sweep` | 10 zoom-in + 10 zoom-out cycles on default
workflow |
| `canvas-pan-many-nodes` | 10 pan sweeps over 100-node workflow |
| `canvas-many-nodes-idle` | 2-second idle measurement with 100 nodes
rendered |

### Infrastructure
- `PerformanceHelper.ts`: Installs PerformanceObserver for longtask,
collects TBT, measures frame duration via rAF
- `perf-report.ts`: Reports TBT and frame duration in PR comment tables
- `browser_tests/assets/perf/many_nodes_100.json`: 100-node (10×10 grid)
test fixture

## Review Focus
- TBT collection clears entries at `startMeasuring()` and reads at
`stopMeasuring()` — ensure no race with observer buffering
- Frame duration sampling uses 10 frames — enough for signal without
slowing tests

Depends on: #9886, #9887

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9910-feat-add-TBT-frameDuration-metrics-and-new-perf-test-scenarios-3236d73d365081488ae3c594a8bf7cff)
by [Unito](https://www.unito.io)

browser_tests/fixtures/helpers/PerformanceHelper.ts

@@ -27,6 +27,8 @@ export interface PerfMeasurement {
   jsHeapTotalBytes: number
   scriptDurationMs: number
   eventListeners: number
+  totalBlockingTimeMs: number
+  frameDurationMs: number
 }
 
 export class PerformanceHelper {
@@ -75,12 +77,92 @@ export class PerformanceHelper {
     }
   }
 
+  /**
+   * Collect longtask entries from PerformanceObserver and compute TBT.
+   * TBT = sum of (duration - 50ms) for every task longer than 50ms.
+   */
+  private async collectTBT(): Promise<number> {
+    return this.page.evaluate(() => {
+      const state = (window as unknown as Record<string, unknown>)
+        .__perfLongtaskState as
+        | { observer: PerformanceObserver; tbtMs: number }
+        | undefined
+      if (!state) return 0
+
+      // Flush any queued-but-undelivered entries into our accumulator
+      for (const entry of state.observer.takeRecords()) {
+        if (entry.duration > 50) state.tbtMs += entry.duration - 50
+      }
+      const result = state.tbtMs
+      state.tbtMs = 0
+      return result
+    })
+  }
+
+  /**
+   * Measure average frame duration via rAF timing over a sample window.
+   * Returns average ms per frame (lower = better, 16.67 = 60fps).
+   */
+  private async measureFrameDuration(sampleFrames = 10): Promise<number> {
+    return this.page.evaluate((frames) => {
+      return new Promise<number>((resolve) => {
+        const timeout = setTimeout(() => resolve(0), 5000)
+        const timestamps: number[] = []
+        let count = 0
+        function tick(ts: number) {
+          timestamps.push(ts)
+          count++
+          if (count <= frames) {
+            requestAnimationFrame(tick)
+          } else {
+            clearTimeout(timeout)
+            if (timestamps.length < 2) {
+              resolve(0)
+              return
+            }
+            const total = timestamps[timestamps.length - 1] - timestamps[0]
+            resolve(total / (timestamps.length - 1))
+          }
+        }
+        requestAnimationFrame(tick)
+      })
+    }, sampleFrames)
+  }
+
   async startMeasuring(): Promise<void> {
     if (this.snapshot) {
       throw new Error(
         'Measurement already in progress — call stopMeasuring() first'
       )
     }
+    // Install longtask observer if not already present, then reset the
+    // accumulator so old longtasks don't bleed into the new measurement window.
+    await this.page.evaluate(() => {
+      const win = window as unknown as Record<string, unknown>
+      if (!win.__perfLongtaskState) {
+        const state: { observer: PerformanceObserver; tbtMs: number } = {
+          observer: new PerformanceObserver((list) => {
+            const self = (window as unknown as Record<string, unknown>)
+              .__perfLongtaskState as {
+              observer: PerformanceObserver
+              tbtMs: number
+            }
+            for (const entry of list.getEntries()) {
+              if (entry.duration > 50) self.tbtMs += entry.duration - 50
+            }
+          }),
+          tbtMs: 0
+        }
+        state.observer.observe({ type: 'longtask', buffered: true })
+        win.__perfLongtaskState = state
+      }
+      const state = win.__perfLongtaskState as {
+        observer: PerformanceObserver
+        tbtMs: number
+      }
+      state.tbtMs = 0
+      state.observer.takeRecords()
+    })
     this.snapshot = await this.getSnapshot()
   }
 
@@ -94,6 +176,11 @@ export class PerformanceHelper {
       return after[key] - before[key]
     }
 
+    const [totalBlockingTimeMs, frameDurationMs] = await Promise.all([
+      this.collectTBT(),
+      this.measureFrameDuration()
+    ])
+
     return {
       name,
       durationMs: delta('Timestamp') * 1000,
@@ -106,7 +193,9 @@ export class PerformanceHelper {
       domNodes: delta('Nodes'),
       jsHeapTotalBytes: delta('JSHeapTotalSize'),
       scriptDurationMs: delta('ScriptDuration') * 1000,
-      eventListeners: delta('JSEventListeners')
+      eventListeners: delta('JSEventListeners'),
+      totalBlockingTimeMs,
+      frameDurationMs
     }
   }
 }

browser_tests/tests/performance.spec.ts

@@ -1,3 +1,5 @@
+import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import { recordMeasurement } from '../helpers/perfReporter'
 
@@ -174,4 +176,70 @@ test.describe('Performance', { tag: ['@perf'] }, () => {
     recordMeasurement(m)
     console.log(`Subgraph clipping: ${m.layouts} forced layouts`)
   })
+
+  test('canvas zoom sweep', async ({ comfyPage }) => {
+    await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.perf.startMeasuring()
+
+    // Zoom in 10 steps, then zoom out 10 steps
+    for (let i = 0; i < 10; i++) {
+      await comfyPage.canvasOps.zoom(-100)
+      await comfyPage.nextFrame()
+    }
+    for (let i = 0; i < 10; i++) {
+      await comfyPage.canvasOps.zoom(100)
+      await comfyPage.nextFrame()
+    }
+
+    const m = await comfyPage.perf.stopMeasuring('canvas-zoom-sweep')
+    recordMeasurement(m)
+    console.log(
+      `Zoom sweep: ${m.layouts} layouts, ${m.frameDurationMs.toFixed(1)}ms/frame, TBT=${m.totalBlockingTimeMs.toFixed(0)}ms`
+    )
+  })
+
+  test('minimap idle', async ({ comfyPage }) => {
+    // Enable minimap via setting, load workflow, then measure idle cost
+    await comfyPage.settings.setSetting('Comfy.Minimap.Visible', true)
+    await comfyPage.workflow.loadWorkflow('large-graph-workflow')
+
+    // Wait for minimap to render
+    await comfyPage.page
+      .locator('.litegraph-minimap')
+      .waitFor({ state: 'visible', timeout: 5000 })
+
+    await comfyPage.perf.startMeasuring()
+
+    // Idle for 2 seconds with minimap open and 245 nodes
+    for (let i = 0; i < 120; i++) {
+      await comfyPage.nextFrame()
+    }
+
+    const m = await comfyPage.perf.stopMeasuring('minimap-idle')
+    recordMeasurement(m)
+    console.log(
+      `Minimap idle: ${m.styleRecalcs} style recalcs, ${m.layouts} layouts, TBT=${m.totalBlockingTimeMs.toFixed(0)}ms`
+    )
+  })
+
+  test('workflow execution', async ({ comfyPage }) => {
+    // Uses lightweight PrimitiveString → PreviewAny workflow (no GPU needed)
+    await comfyPage.workflow.loadWorkflow('execution/partial_execution')
+    await comfyPage.perf.startMeasuring()
+
+    // Queue the prompt and wait for execution to complete
+    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
+
+    // Wait for the output widget to populate (execution_success)
+    const outputNode = await comfyPage.nodeOps.getNodeRefById(1)
+    await expect(async () => {
+      expect(await (await outputNode.getWidget(0)).getValue()).toBe('foo')
+    }).toPass({ timeout: 10000 })
+
+    const m = await comfyPage.perf.stopMeasuring('workflow-execution')
+    recordMeasurement(m)
+    console.log(
+      `Workflow execution: ${m.durationMs.toFixed(0)}ms total, ${m.layouts} layouts, TBT=${m.totalBlockingTimeMs.toFixed(0)}ms`
+    )
+  })
 })

scripts/perf-report.ts

@@ -23,6 +23,8 @@ interface PerfMeasurement {
   jsHeapTotalBytes: number
   scriptDurationMs: number
   eventListeners: number
+  totalBlockingTimeMs: number
+  frameDurationMs: number
 }
 
 interface PerfReport {
@@ -43,13 +45,17 @@ type MetricKey =
   | 'domNodes'
   | 'scriptDurationMs'
   | 'eventListeners'
+  | 'totalBlockingTimeMs'
+  | 'frameDurationMs'
 const REPORTED_METRICS: { key: MetricKey; label: string; unit: string }[] = [
   { key: 'styleRecalcs', label: 'style recalcs', unit: '' },
   { key: 'layouts', label: 'layouts', unit: '' },
   { key: 'taskDurationMs', label: 'task duration', unit: 'ms' },
   { key: 'domNodes', label: 'DOM nodes', unit: '' },
   { key: 'scriptDurationMs', label: 'script duration', unit: 'ms' },
-  { key: 'eventListeners', label: 'event listeners', unit: '' }
+  { key: 'eventListeners', label: 'event listeners', unit: '' },
+  { key: 'totalBlockingTimeMs', label: 'TBT', unit: 'ms' },
+  { key: 'frameDurationMs', label: 'frame duration', unit: 'ms' }
 ]
 
 function groupByName(