Why should you care?

MarkupVerse dashboards batch DOM reads/writes so stat cards do not jank scroll.

See it live — copy this example

Save as demo.html and open in your browser, or use Run Example below.

<div id="stats" class="mv-stats">
  <span data-metric="mrr">—</span>
  <span data-metric="churn">—</span>
</div>
<script>
requestAnimationFrame(() => {
  const root = document.getElementById('stats');
  root.querySelector('[data-metric=mrr]').textContent = '₹12.4L';
  root.querySelector('[data-metric=churn]').textContent = '1.8%';
});
</script>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• Batch DOM updates in one frame.
• Avoid interleaved offsetHeight reads and style writes.

Practice next

1. Read all metrics first.
2. Write in one rAF callback.
3. Profile with Performance panel.
4. Use DocumentFragment for 20+ nodes.
5. CSS contain: content on stat cards.

Remember

Batch DOM writes. rAF for visual updates. Avoid layout thrash.

MarkupVerse stat refresh

Live MRR updates every 5s.

Outcome: Scroll stays smooth during updates.