Skip to content

perf: reduce per-frame allocations and fix memory leaks#40

Open
genebean wants to merge 1 commit into
malcolmrigg:masterfrom
genebean:pr/performance-and-memory
Open

perf: reduce per-frame allocations and fix memory leaks#40
genebean wants to merge 1 commit into
malcolmrigg:masterfrom
genebean:pr/performance-and-memory

Conversation

@genebean

@genebean genebean commented Jun 5, 2026

Copy link
Copy Markdown

I really like this card but the bugs were bothering me so I got Claude Code to help me make things better. This is the first of a set of 3 PRs that when combined are what I am now using at home.

  • Cache computed theme colors in set hass so drawing functions do not call getComputedStyle on every animation frame
  • Bind animation callback once (_boundDrawClock) instead of allocating a new closure on every requestAnimationFrame call
  • Replace manual ctx.rotate undo math with ctx.save/ctx.restore in all drawing functions, eliminating floating-point drift risk
  • Replace DOM div creation in drawNumbers with ctx.measureText for font height, eliminating forced reflow on every frame
  • Fix clearRect: was only clearing top-left quadrant; now clears full canvas (canvas.width/2, canvas.height/2 → canvas.width, canvas.height)
  • Fix CSS property name typo: '--primary-background-color:' → without ':'
  • Store ResizeObserver as instance variable and add disconnectedCallback to disconnect it (and cancel pending rAF/timeout) when card is removed
  • Move resize debounce timeout to per-instance (_resizeTimeout) so multiple clock cards on the same dashboard don't clobber each other's timers; remove module-level resizeTimeout/resizeDelay/debouncedOnResize

No behavior changes — VERSION remains 0.9.0.

- Cache computed theme colors in set hass so drawing functions do not
  call getComputedStyle on every animation frame
- Bind animation callback once (_boundDrawClock) instead of allocating a
  new closure on every requestAnimationFrame call
- Replace manual ctx.rotate undo math with ctx.save/ctx.restore in all
  drawing functions, eliminating floating-point drift risk
- Replace DOM div creation in drawNumbers with ctx.measureText for font
  height, eliminating forced reflow on every frame
- Fix clearRect: was only clearing top-left quadrant; now clears full
  canvas (canvas.width/2, canvas.height/2 → canvas.width, canvas.height)
- Fix CSS property name typo: '--primary-background-color:' → without ':'
- Store ResizeObserver as instance variable and add disconnectedCallback
  to disconnect it (and cancel pending rAF/timeout) when card is removed
- Move resize debounce timeout to per-instance (_resizeTimeout) so
  multiple clock cards on the same dashboard don't clobber each other's
  timers; remove module-level resizeTimeout/resizeDelay/debouncedOnResize

No behavior changes — VERSION remains 0.9.0.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant