Only touch the DOM when a displayed value changes
The readout hung and then skipped numbers in a focused desktop window. render() runs every animation frame and was writing unconditionally — measured at 11 DOM mutations per frame — whether or not anything had changed. Two of those are the .time text node, a glyph run up to 190px, so every frame forced a style recalc and a full relayout to redraw digits that turn over once a second. Routing the per-frame writes through change guards takes a steady frame from 11 writes to 0. The timing itself was never at fault and is untouched here. elapsed() is one subtraction from a single monotonic performance.now() stamp and the reserve is debited once, in tap(), so nothing accumulates per frame and a dropped frame cannot cost or gift anyone a millisecond. Measured against wall clock over a running turn: 0.0000ms drift across 5s, 12s and 17s segments. Also fixes a real skip in fmt(). It switched from m:ss to tenths at ms < 10000 with both branches rounding up, so the coarse branch read a second high: counting down gave 0:11 for a full second, 0:10 for a single millisecond, then 10.0. Handing 10000ms to the tenths branch gives a monotone 0:11 -> 10.0 -> 9.9. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
+1
-1
@@ -1,5 +1,5 @@
|
||||
/* Cache-first: once installed the clock never touches the network again. */
|
||||
const CACHE = "bgclock-v6";
|
||||
const CACHE = "bgclock-v7";
|
||||
const FILES = [
|
||||
"./",
|
||||
"./index.html",
|
||||
|
||||
Reference in New Issue
Block a user