Slogan countdown: update the clock text, not the whole line, every second

OP OpenVibers committed 16 Sept 2026 · 4b70993b8c · 2 files, +9 −2

The countdown replaced its innerHTML every second, re-creating the icon element each time. It was
the largest remaining source of idle DOM churn on the home page (20 of 82 mutations in a 20s idle
sample). The line is built once and only the clock's text node changes.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01CMxJm1dB8rdsaMSgNjVa82

Changes

ddiff --git a/public/index.html b/public/index.html
iindex 21e1bb72..184a8eb6 100644
---- a/public/index.html
++++ b/public/index.html
@@@ -5139,7 +5139,7 @@ curl -s https://openvibe.media/live/@Goosely/chat-insight.json | jq ".chat_insig
      };
  })();
  </script>
--<script src="/js/app.js?v=182" defer></script>
++<script src="/js/app.js?v=183" defer></script>
  <script src="/js/stream-player.js?v=22" defer></script>
  <script src="/js/stream-pip.js?v=1" defer></script>
  <script src="/js/chat-shared.js?v=3" defer></script>
ddiff --git a/public/js/app.js b/public/js/app.js
iindex 6997893a..0ecc3d48 100644
---- a/public/js/app.js
++++ b/public/js/app.js
@@@ -2305,7 +2305,14 @@ function startSloganCountdown(nextAt) {
              return;
          }
          const s = Math.floor(ms / 1000) % 60, m = Math.floor(ms / 60000) % 60, h = Math.floor(ms / 3600000);
--        el.innerHTML = `<i class="fa-solid fa-fire"></i> next fresh batch of memes in <b>${pad(h)}:${pad(m)}:${pad(s)}</b>`;
++        const clock = `${pad(h)}:${pad(m)}:${pad(s)}`;
++        // Rebuild the line once, then only touch the clock's text. Replacing the whole innerHTML every
++        // second re-created the icon element and was the largest remaining source of idle DOM churn
++        // on the home page (20 of 82 mutations in a 20s idle sample).
++        let b = el.querySelector('b[data-clock]');
++        if (!b) { el.innerHTML = `<i class="fa-solid fa-fire"></i> next fresh batch of memes in <b data-clock></b>`; b = el.querySelector('b[data-clock]'); }
++        if (b.firstChild && b.firstChild.nodeType === 3) { if (b.firstChild.data !== clock) b.firstChild.data = clock; }
++        else b.textContent = clock;
      };
      tick();
      _sloganCountdownTimer = setInterval(tick, 1000);

diff --git a/public/index.html b/public/index.html

index 21e1bb72..184a8eb6 100644

--- a/public/index.html

+++ b/public/index.html

@@ -5139,7 +5139,7 @@ curl -s https://openvibe.media/live/@Goosely/chat-insight.json | jq ".chat_insig

};

})();

</script>

-<script src="/js/app.js?v=182" defer></script>

+<script src="/js/app.js?v=183" defer></script>

diff --git a/public/js/app.js b/public/js/app.js

index 6997893a..0ecc3d48 100644

--- a/public/js/app.js

+++ b/public/js/app.js

@@ -2305,7 +2305,14 @@ function startSloganCountdown(nextAt) {

return;

}

const s = Math.floor(ms / 1000) % 60, m = Math.floor(ms / 60000) % 60, h = Math.floor(ms / 3600000);

- el.innerHTML = `<i class="fa-solid fa-fire"></i> next fresh batch of memes in <b>${pad(h)}:${pad(m)}:${pad(s)}</b>`;

+ const clock = `${pad(h)}:${pad(m)}:${pad(s)}`;

+ // Rebuild the line once, then only touch the clock's text. Replacing the whole innerHTML every

+ // second re-created the icon element and was the largest remaining source of idle DOM churn

+ // on the home page (20 of 82 mutations in a 20s idle sample).

+ let b = el.querySelector('b[data-clock]');

+ if (!b) { el.innerHTML = `<i class="fa-solid fa-fire"></i> next fresh batch of memes in <b data-clock></b>`; b = el.querySelector('b[data-clock]'); }

+ if (b.firstChild && b.firstChild.nodeType === 3) { if (b.firstChild.data !== clock) b.firstChild.data = clock; }

+ else b.textContent = clock;

};

tick();

_sloganCountdownTimer = setInterval(tick, 1000);