Day 25: DOM Performance & Patterns

<button id="slow">Slow: read/write mixed</button> <button id="fast">Fast: read all, then write all</button>
<p id="t"></p>
<div id="boxes"></div>

<script>
const boxes = document.querySelector('#boxes');
for (let i = 0; i < 400; i++) {
  const d = document.createElement('div');
  d.style.cssText = 'height:4px;margin:1px 0;background:#fde68a;width:50%';
  boxes.append(d);
}
const items = [...boxes.children];

document.querySelector('#slow').addEventListener('click', () => {
  const t0 = performance.now();
  for (const el of items) {
    const w = el.offsetWidth;          // READ (forces layout)
    el.style.width = (w % 300) + 20 + 'px';   // WRITE (invalidates layout) → next read recalculates
  }
  document.querySelector('#t').textContent = `Mixed: ${(performance.now() - t0).toFixed(1)} ms`;
});
document.querySelector('#fast').addEventListener('click', () => {
  const t0 = performance.now();
  const widths = items.map(el => el.offsetWidth);                  // all READS first
  items.forEach((el, i) => { el.style.width = (widths[i] % 300) + 20 + 'px'; });   // then all WRITES
  document.querySelector('#t').textContent = `Batched: ${(performance.now() - t0).toFixed(1)} ms`;
});
</script>

<div id="bar" style="height:6px;background:#ca8a04;width:0;position:sticky;top:0;transition:none"></div>
<div id="page" style="height:240px;overflow:auto;border:1px solid #e5e7eb;border-radius:8px;padding:10px">
  <p>Scroll this article – the reading-progress bar above updates once per frame.</p>
  <div style="height:900px;background:linear-gradient(#fff,#fef3c7)"></div>
</div>

<script>
const page = document.querySelector('#page');
const bar = document.querySelector('#bar');
let ticking = false;

page.addEventListener('scroll', () => {
  if (ticking) return;                     // at most one update per frame
  ticking = true;
  requestAnimationFrame(() => {
    const max = page.scrollHeight - page.clientHeight;
    bar.style.width = (page.scrollTop / max * 100) + '%';
    ticking = false;
  });
}, { passive: true });                     // promise not to call preventDefault → smoother scrolling
</script>

// Processing 50,000 order rows in one go blocks the page; yield between chunks
const orders = Array.from({ length: 50000 }, (_, i) => ({ id: i, total: (i * 37) % 2500 }));
const yieldToBrowser = () => new Promise(r => setTimeout(r, 0));   // browsers also have scheduler.yield()

async function totalInChunks(rows, size = 5000) {
  let sum = 0, chunks = 0;
  for (let i = 0; i < rows.length; i += size) {
    for (const row of rows.slice(i, i + size)) sum += row.total;
    chunks++;
    await yieldToBrowser();                  // let clicks and paints happen between chunks
  }
  return { sum, chunks };
}
const t0 = performance.now();
totalInChunks(orders).then(r => console.log(`₹${r.sum.toLocaleString('en-IN')} in ${r.chunks} chunks, ${Math.round(performance.now() - t0)} ms total`));

// Pub/Sub (observer): parts of the app talk without knowing each other
function createEventBus() {
  const listeners = {};
  return {
    on(event, fn) { (listeners[event] ||= []).push(fn); return () => this.off(event, fn); },
    off(event, fn) { listeners[event] = (listeners[event] || []).filter(f => f !== fn); },
    emit(event, data) { (listeners[event] || []).forEach(fn => fn(data)); },
  };
}

// A tiny store: one state object, updates through actions, subscribers re-render
function createStore(initial, bus) {
  let state = initial;
  return {
    get: () => state,
    update(change) { state = { ...state, ...change(state) }; bus.emit('change', state); },
  };
}

const bus = createEventBus();
const store = createStore({ cart: [], total: 0 }, bus);
const stopBadge = bus.on('change', s => console.log(`🛒 badge: ${s.cart.length} item(s)`));
bus.on('change', s => console.log(`💰 summary: ₹${s.total}`));

store.update(s => ({ cart: [...s.cart, 'Kaju'], total: s.total + 900 }));
stopBadge();                                     // unsubscribe one listener
store.update(s => ({ cart: [...s.cart, 'Ladoo'], total: s.total + 500 }));