Give the monitor panel its own compositor layer

A fixed element repainting every frame on top of the graph canvas shared
that canvas's layer, so each repaint invalidated the region beneath it
too. will-change: transform promotes the panel to its own layer; the
canvas underneath no longer repaints on the monitor's account.

CHANGELOG.md

@@ -1,6 +1,8 @@
 # Changelog
 
 ## [未发布 Unreleased]
+- 资源监视器面板改为独立合成层（`will-change: transform`），它每帧重绘时不再连带重绘被它盖住的那块主画布
+- The resource monitor panel now gets its own compositor layer (`will-change: transform`), so its per-frame redraw no longer forces the main canvas region beneath it to repaint
 - 资源监视器的数据行改为只创建一次：条形每帧用 transform 平滑跟随曲线（不触发布局），文字每 100ms 更新。此前每帧重写整块 innerHTML 并新建 canvas 量字宽，每秒数百次 DOM 重建，是拖动画布时掉帧的来源之一；现在单次开销降到 0.01ms 以下
 - The resource monitor's data rows are now built once: bars follow the curves every frame via transform (no layout), text updates every 100ms. Previously every frame rewrote the whole innerHTML and created a canvas per row to measure text — hundreds of DOM rebuilds a second and one cause of dropped frames while panning; each update now costs under 0.01ms
 

README.md

@@ -9,6 +9,8 @@ This is a custom node utility package developed for ComfyUI. Initially created f
 ## 最新更新 / Last Update
 
 ### [未发布 Unreleased]
+- 资源监视器面板改为独立合成层（`will-change: transform`），它每帧重绘时不再连带重绘被它盖住的那块主画布  
+- The resource monitor panel now gets its own compositor layer (`will-change: transform`), so its per-frame redraw no longer forces the main canvas region beneath it to repaint  
 - 资源监视器的数据行改为只创建一次：条形每帧用 transform 平滑跟随曲线（不触发布局），文字每 100ms 更新。此前每帧重写整块 innerHTML 并新建 canvas 量字宽，每秒数百次 DOM 重建，是拖动画布时掉帧的来源之一；现在单次开销降到 0.01ms 以下  
 - The resource monitor's data rows are now built once: bars follow the curves every frame via transform (no layout), text updates every 100ms. Previously every frame rewrote the whole innerHTML and created a canvas per row to measure text — hundreds of DOM rebuilds a second and one cause of dropped frames while panning; each update now costs under 0.01ms  
 

web/resourcemonitor.js

@@ -127,7 +127,8 @@ const KayResourceMonitor = {
         workflow: 'rgba(208, 255, 0, 0.86)',
     },
     styles: {
-        toolbar: `position: fixed; display: flex; flex-direction: column; color: rgba(186, 186, 186, 0.8); padding: 10px; border-radius: 5px; z-index: 10000; user-select: none; pointer-events: none; max-height: 219px;`,
+        // will-change: transform 让面板拥有自己的合成层：它每帧重绘时不再连带重绘被它盖住的那块主画布。
+        toolbar: `position: fixed; display: flex; flex-direction: column; color: rgba(186, 186, 186, 0.8); padding: 10px; border-radius: 5px; z-index: 10000; user-select: none; pointer-events: none; max-height: 219px; will-change: transform;`,
         header: `margin-bottom: 5px; font-weight: bold; font-size: 10px;`,
         headerText: `cursor: grab; pointer-events: auto; display: inline-block;`,
         canvas: `flex: 1 1 0; min-height: 0; width: 100%; margin-top: 5px; margin-bottom: 10px; pointer-events: none; display: block;`,