DOM Performance

Reflows happen when the browser recalculates layout. They're expensive and should be minimized.

What Triggers Reflow

// Reading layout properties triggers reflow
const width = element.offsetWidth;
const height = element.offsetHeight;
const rect = element.getBoundingClientRect();
const computed = window.getComputedStyle(element);

// Writing layout properties triggers reflow
element.style.width = '100px';
element.style.height = '200px';
element.style.position = 'absolute';

Layout Thrashing

// BAD: Alternating reads and writes
for (let i = 0; i < 100; i++) {
  element.style.width = `${i}px`; // Write
  console.log(element.offsetWidth); // Read - forces layout!
}

// GOOD: Batch reads, then batch writes
const width = element.offsetWidth; // Read once
for (let i = 0; i < 100; i++) {
  element.style.width = `${width + i}px`; // Write
}

Minimize DOM Changes

// BAD: Multiple individual changes
document.body.appendChild(newDiv1);
document.body.appendChild(newDiv2);
document.body.appendChild(newDiv3);

// GOOD: Single batch change
const fragment = document.createDocumentFragment();
fragment.appendChild(newDiv1);
fragment.appendChild(newDiv2);
fragment.appendChild(newDiv3);
document.body.appendChild(fragment); // Single reflow

Use CSS Classes

// BAD: Multiple style changes
element.style.color = 'red';
element.style.backgroundColor = 'blue';
element.style.fontSize = '16px';
element.style.padding = '10px';

// GOOD: Single class change
element.classList.add('active-state');

/* CSS handles the rest */
.active-state {
  color: red;
  background-color: blue;
  font-size: 16px;
  padding: 10px;
}

DocumentFragment is a lightweight container for building DOM trees offline.

Why Fragments?

// BAD: Each appendChild triggers reflow
const list = document.querySelector('ul');
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  list.appendChild(li); // 1000 reflows!
}

// GOOD: Fragment batches updates
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li); // No reflow yet!
}
list.appendChild(fragment); // 1 reflow!

Creating Fragments

// Method 1: DocumentFragment
const fragment = document.createDocumentFragment();

// Method 2: Template element
const template = document.querySelector('#item-template');
const clone = template.content.cloneNode(true);
document.body.appendChild(clone);

// Method 3: Template literal
const html = `
  <div class="item">
    <h2>Title</h2>
    <p>Content</p>
  </div>
`;
const temp = document.createElement('div');
temp.innerHTML = html;
const fragment = temp.firstElementChild;

Practical Example

function renderList(items) {
  const list = document.querySelector('#list');
  const fragment = document.createDocumentFragment();
  
  items.forEach(item => {
    const li = document.createElement('li');
    li.dataset.id = item.id;
    li.innerHTML = `
      <span class="name">${item.name}</span>
      <button class="delete">X</button>
    `;
    fragment.appendChild(li);
  });
  
  // Single DOM update
  list.innerHTML = ''; // Clear list
  list.appendChild(fragment); // Add all items
}

Cloning Nodes

const original = document.querySelector('.item');

// Shallow clone (no children)
const shallow = original.cloneNode(false);

// Deep clone (with children)
const deep = original.cloneNode(true);

// Add to DOM
document.body.appendChild(deep);

Virtual scrolling renders only visible items, essential for large lists.

The Problem

// Rendering 10,000 items is slow and memory-intensive
const items = Array.from({ length: 10000 }, (_, i) => ({
  id: i,
  name: `Item ${i}`
}));

// This is terrible for performance!
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item.name;
  list.appendChild(li);
});

Basic Virtual Scroll Implementation

class VirtualScroll {
  constructor(container, items, itemHeight = 30) {
    this.container = container;
    this.items = items;
    this.itemHeight = itemHeight;
    this.visibleCount = Math.ceil(container.clientHeight / itemHeight);
    
    // Create scroll container
    this.scrollContent = document.createElement('div');
    this.scrollContent.style.height = `${items.length * itemHeight}px`;
    this.scrollContent.style.position = 'relative';
    
    // Create visible container
    this.visibleContainer = document.createElement('div');
    this.visibleContainer.style.position = 'absolute';
    this.visibleContainer.style.width = '100%';
    
    this.scrollContent.appendChild(this.visibleContainer);
    this.container.appendChild(this.scrollContent);
    
    // Listen for scroll
    this.container.addEventListener('scroll', () => this.render());
    this.render();
  }
  
  render() {
    const scrollTop = this.container.scrollTop;
    const startIndex = Math.floor(scrollTop / this.itemHeight);
    const endIndex = Math.min(startIndex + this.visibleCount, this.items.length);
    
    // Update position
    this.visibleContainer.style.top = `${startIndex * this.itemHeight}px`;
    
    // Render only visible items
    this.visibleContainer.innerHTML = '';
    for (let i = startIndex; i < endIndex; i++) {
      const div = document.createElement('div');
      div.style.height = `${this.itemHeight}px`;
      div.textContent = this.items[i].name;
      this.visibleContainer.appendChild(div);
    }
  }
}

// Usage
const container = document.querySelector('#scroll-container');
const virtualScroll = new VirtualScroll(container, items, 30);

Windowing Libraries

// Popular virtual scrolling libraries:
// - react-window
// - react-virtualized
// - vue-virtual-scroll-list
// - tanstack-virtual

// React example with react-window
import { FixedSizeList } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>
    Item {index}
  </div>
);

const VirtualList = () => (
  <FixedSizeList
    height={500}
    width="100%"
    itemCount={10000}
    itemSize={35}
  >
    {Row}
  </FixedSizeList>
);