mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-19 03:49:33 +00:00
cc1338e51e
## Summary Add `ph-no-capture` class to TransformPane to block PostHog session recording of canvas node DOM mutations, eliminating 226ms CPU overhead in the viewport scenario. ## Changes - **What**: Add `ph-no-capture` CSS class to the TransformPane root div and a unit test guarding it - **Why**: Profiling showed PostHog session recording (via rrweb mutation observer) consuming **226ms CPU** in the viewport scenario — **9× more** than the entire Vue reactivity system (25ms). The 150+ LGraphNode Vue components that mount/unmount during pan/zoom each trigger rrweb to snapshot new DOM subtrees. ### How it works PostHog uses rrweb under the hood. The `ph-no-capture` class maps to rrweb's `blockClass`, which causes: 1. `processMutation` to **early-return** for `childList` mutations when the parent is blocked 2. `genAdds` to **skip child traversal** (`dom.childNodes()`) for blocked elements 3. The element to be replaced with a **same-size placeholder** in replay This means all 150+ node components inside TransformPane produce **zero mutation processing cost**. ### Scope - **TransformPane**: blocked — wraps all Vue-rendered graph nodes - **LinkOverlayCanvas**: evaluated but not blocked — contains only a single `<canvas>` element with no DOM children, so no mutation overhead - **All other UI** (sidebar, menus, dialogs, toolbar, bottom panel): continues recording normally ### Trade-off The graph canvas area appears as a blank placeholder in session replays. This is acceptable because canvas interaction is better captured via workflow JSON, and the performance gain far outweighs the replay fidelity loss. ## Review Focus - Correctness of the `ph-no-capture` placement on TransformPane as the optimal DOM boundary - Whether any other high-mutation DOM subtrees should also be blocked ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10494-perf-exclude-canvas-nodes-from-PostHog-session-recording-32e6d73d36508169ab07f1b193860fb0) by [Unito](https://www.unito.io) --------- Co-authored-by: Dante <bunggl@naver.com>