To make this runnable 24/7 on an old device without turning it into a hand-warmer. This meant focusing heavily on performance and efficiency.
The core idea was to separate static content from dynamic content to avoid unnecessary, expensive redraws on every frame. Here’s how I approached it:
This meant moving beyond simple CSS animations and focusing on a more optimized rendering approach.
Here's what I did:
- Off-Screen Canvas: Instead of manipulating DOM elements directly for each animation tick, I use an off-screen canvas to pre-render the state of the clock digits. This avoids triggering constant, expensive layout shifts and repaints on the main page, making the animation much smoother.
- Event-Driven Rendering: The clock doesn't just redraw on every requestAnimationFrame. It's smarter than that. I implemented an event-driven model where the rendering logic only triggers when a digit actually needs to change (i.e., once per second for the seconds, once per minute for the minutes, etc.).
This decoupling of rendering from the animation frame rate saves a surprising amount of CPU cycles, which is crucial for older devices.
To make this runnable 24/7 on an old device without turning it into a hand-warmer. This meant focusing heavily on performance and efficiency.
The core idea was to separate static content from dynamic content to avoid unnecessary, expensive redraws on every frame. Here’s how I approached it:
This meant moving beyond simple CSS animations and focusing on a more optimized rendering approach.
Here's what I did:
- Off-Screen Canvas: Instead of manipulating DOM elements directly for each animation tick, I use an off-screen canvas to pre-render the state of the clock digits. This avoids triggering constant, expensive layout shifts and repaints on the main page, making the animation much smoother.
- Event-Driven Rendering: The clock doesn't just redraw on every requestAnimationFrame. It's smarter than that. I implemented an event-driven model where the rendering logic only triggers when a digit actually needs to change (i.e., once per second for the seconds, once per minute for the minutes, etc.).
This decoupling of rendering from the animation frame rate saves a surprising amount of CPU cycles, which is crucial for older devices.