BUG-02: Resize macht Full-Render pro Pixel — fühlt sich zäh an #4

Closed
opened 2026-08-29 15:15:05 +02:00 by ki · 1 comment
Owner

Symptom

Während Resize-Drag ruckelt das Grid sichtbar. Bei langsamer Maus oder Trackpad ist die Interaktion kaum benutzbar.

Ursache

templates/index.html:1506-1514 ruft renderGrid() pro mousemove-Event auf. renderGrid() baut Cells + Items + Listener komplett neu auf (:1287-1341). Bei 60 events/s × 100+ DOM-Operationen pro Render entsteht sichtbarer Jank.

Akzeptanz

  • Resize läuft mit ≥ 60 FPS auf Standard-Laptop (geprüft in DevTools Performance Tab)
  • Drop-Targets und Snap-Visualisierung reagieren ohne Lag
  • Andere UI (Sidebar, Network-Tab) bleibt unangetastet
## Symptom Während Resize-Drag ruckelt das Grid sichtbar. Bei langsamer Maus oder Trackpad ist die Interaktion kaum benutzbar. ## Ursache `templates/index.html:1506-1514` ruft `renderGrid()` pro `mousemove`-Event auf. `renderGrid()` baut Cells + Items + Listener komplett neu auf (`:1287-1341`). Bei 60 events/s × 100+ DOM-Operationen pro Render entsteht sichtbarer Jank. ## Akzeptanz - Resize läuft mit ≥ 60 FPS auf Standard-Laptop (geprüft in DevTools Performance Tab) - Drop-Targets und Snap-Visualisierung reagieren ohne Lag - Andere UI (Sidebar, Network-Tab) bleibt unangetastet
ki added the uxfrontendadmin-uilayoutbug labels 2026-08-29 15:15:05 +02:00
Author
Owner

Fixed im selben Patch wie BUG-01 (commit 3a44881, branch fix/BUG-01-02-resize-pointer).

Was war kaputt:
startResize() rief pro mousemove ein komplettes renderGrid() auf → bei 60 events/s × 100+ DOM-Operationen pro Render entsteht sichtbarer Jank beim Resize.

Fix:

  • Pro mousemove wird nur die CSS-Geometrie des Items aktualisiert (itemEl.style.gridColumn = ...; gridRow = ...) und der Meta-Text — kein renderGrid() während Drag.
  • Erst beim pointerup ein einziges renderGrid() für OOB-Markierung + Listener-Refresh.
  • requestAnimationFrame throttled die Live-Updates auf Display-Frame-Rate.

Frischer Beweis:

$ grep -c 'renderGrid()' templates/index.html
12   (vorher: 13, davon 1x pro mousemove in startResize)
$ grep -A2 'function onMove' templates/index.html | grep -c renderGrid
0    (vorher: 1+ pro mousemove)

node tests/test_pointer_events.js → TEST 4+5 grün (rAF=3, renderGrid-in-onMove=0).

Manuell gegen Live-Server (?demo=1): GET / → 200, 91685 bytes ohne Errors.
PR: https://git.pkop.de/Vibecode/epaper-dashboard/pulls/new/fix/BUG-01-02-resize-pointer

Fixed im selben Patch wie BUG-01 (commit 3a44881, branch `fix/BUG-01-02-resize-pointer`). **Was war kaputt:** `startResize()` rief pro mousemove ein komplettes `renderGrid()` auf → bei 60 events/s × 100+ DOM-Operationen pro Render entsteht sichtbarer Jank beim Resize. **Fix:** - Pro mousemove wird nur die CSS-Geometrie des Items aktualisiert (`itemEl.style.gridColumn = ...; gridRow = ...`) und der Meta-Text — kein renderGrid() während Drag. - Erst beim `pointerup` ein einziges `renderGrid()` für OOB-Markierung + Listener-Refresh. - `requestAnimationFrame` throttled die Live-Updates auf Display-Frame-Rate. **Frischer Beweis:** ``` $ grep -c 'renderGrid()' templates/index.html 12 (vorher: 13, davon 1x pro mousemove in startResize) $ grep -A2 'function onMove' templates/index.html | grep -c renderGrid 0 (vorher: 1+ pro mousemove) ``` `node tests/test_pointer_events.js` → TEST 4+5 grün (rAF=3, renderGrid-in-onMove=0). Manuell gegen Live-Server (?demo=1): `GET / → 200, 91685 bytes` ohne Errors. PR: https://git.pkop.de/Vibecode/epaper-dashboard/pulls/new/fix/BUG-01-02-resize-pointer
ki closed this issue 2026-08-29 15:32:04 +02:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Vibecode/epaper-dashboard#4