DOM Performance — Complete Guide

// PROPERTIES THAT TRIGGER REFLOW (layout recalculation):
// Reading these forces the browser to compute layout:
//   offsetTop, offsetLeft, offsetWidth, offsetHeight
//   scrollTop, scrollLeft, scrollWidth, scrollHeight
//   clientTop, clientLeft, clientWidth, clientHeight
//   getComputedStyle()
//   getBoundingClientRect()

// PROPERTIES THAT TRIGGER REPAINT ONLY (no layout):
//   color, backgroundColor, visibility, outline
//   backgroundImage, borderRadius, boxShadow

// CHANGES THAT TRIGGER REFLOW (writing):
//   Changing width, height, margin, padding
//   Changing font-size, font-family
//   Changing display (none to block)
//   Adding or removing elements
//   Changing class names that affect layout

const box = document.querySelector('.perf-box');

// BAD: triggers reflow on every iteration
for (let i = 0; i < 100; i++) {
    box.style.width = i + 'px';       // Write (queued)
    console.log(box.offsetWidth);     // Read (forces reflow)
}

// GOOD: batch reads and writes separately
for (let i = 0; i < 100; i++) {
    box.style.width = i + 'px';       // All writes queued
}
console.log(box.offsetWidth);          // Single read (one reflow)

// LAYOUT THRASHING EXAMPLE
const items = document.querySelectorAll('.dynamic-item');

// BAD: thrashing loop
for (let i = 0; i < items.length; i++) {
    const width = items[i].offsetWidth;  // Read (forces reflow)
    items[i].style.width = (width * 2) + 'px';  // Write (invalidates layout)
    // Next iteration reads again before browser can batch
}

// GOOD: batch reads first
const widths = [];
for (let i = 0; i < items.length; i++) {
    widths.push(items[i].offsetWidth);  // All reads (one reflow)
}
for (let i = 0; i < items.length; i++) {
    items[i].style.width = (widths[i] * 2) + 'px';  // All writes (one reflow)
}

console.log('Layout thrashing avoided');

const animated = document.querySelector('.animated');
let position = 0;

// BAD: setTimeout for animation (not synced with vsync)
// setInterval(() => {
//     position += 1;
//     animated.style.transform = `translateX(${position}px)`;
// }, 16);

// GOOD: requestAnimationFrame (synced with display refresh)
let startTime = null;
function animate(timestamp) {
    if (!startTime) startTime = timestamp;
    const elapsed = timestamp - startTime;

    position = (elapsed / 16) % 500; // Move 500px over ~8 seconds
    animated.style.transform = `translateX(${position}px)`;

    requestAnimationFrame(animate);
}

// Start the animation
requestAnimationFrame(animate);

// requestAnimationFrame pauses when tab is hidden
// (saves CPU and battery)
console.log('Animation started with rAF');

// BAD: repeated DOM queries
function updateBad() {
    document.querySelector('.counter').textContent = count++;
    document.querySelector('.counter').style.color = 'blue';
    document.querySelector('.counter').className = 'updated';
}

// GOOD: cache the reference
const counterEl = document.querySelector('.counter');
function updateGood() {
    counterEl.textContent = count++;
    counterEl.style.color = 'blue';
    counterEl.className = 'updated';
}

// BAD: repeated length access in loops
for (let i = 0; i < document.querySelectorAll('.item').length; i++) {
    // querySelectorAll creates a new collection each time!
    // Even worse, length is re-evaluated on each iteration
}

// GOOD: cache the collection and length
const allItems = document.querySelectorAll('.item');
for (let i = 0; i < allItems.length; i++) {
    // allItems is cached, length is still read each time
}

// BEST: cache length too
for (let i = 0, len = allItems.length; i < len; i++) {
    // Length read once
}

// The browser recommendation is under 1500 DOM nodes.
// Heavy pages struggle above 3000 nodes.

// Check DOM size
const totalElements = document.querySelectorAll('*').length;
console.log(`Total DOM elements: ${totalElements}`);

// If you need to render many items, use one of these:
// 1. Virtual scrolling (render only visible items)
// 2. Pagination (render in pages)
// 3. Windowing (reuse DOM nodes)

// BAD: rendering 10,000 items directly
const list = document.querySelector('#big-list');
for (let i = 0; i < 10000; i++) {
    const item = document.createElement('div');
    item.textContent = `Item ${i}`;
    list.appendChild(item);
    // This creates 10,000 DOM nodes!
}

// BETTER: use pagination or windowing
// Only render what is visible, recycle nodes as user scrolls

console.log('DOM node count after render:', document.querySelectorAll('*').length);

// Step 1: Open Chrome DevTools > Performance tab
// Step 2: Click Record
// Step 3: Perform the action you want to measure
// Step 4: Stop recording

// Look for:
// - Purple bars (rendering) that take > 16ms
// - Red triangles indicating forced reflow/layout
// - Long yellow bars (JavaScript execution)
// - Layout shifts with high scores

// Performance Markers
performance.mark('dom-start');
// ... do DOM operations ...
performance.mark('dom-end');
performance.measure('DOM Operation', 'dom-start', 'dom-end');

const measures = performance.getEntriesByType('measure');
measures.forEach(m => {
    console.log(`${m.name}: ${m.duration.toFixed(2)}ms`);
});

// Clear marks to avoid memory leaks
performance.clearMarks();
performance.clearMeasures();