Performance and memory in DOM code

Stop layout thrashing by separating reads from writes, batch with animation frames, and find the listener and node leaks that make a page degrade over time.

Reads, writes and layout thrashing

// thrashing: every read after a write forces a synchronous layout
for (const el of items) {
  el.style.width = el.offsetWidth / 2 + 'px';   // write, then read, then write
}

// batched: all reads, then all writes - one layout in total
const widths = items.map((el) => el.offsetWidth);
items.forEach((el, i) => { el.style.width = widths[i] / 2 + 'px'; });

// the properties that force layout when you read them
// offsetWidth, offsetHeight, offsetTop, offsetLeft
// clientWidth, clientHeight, scrollWidth, scrollHeight, scrollTop
// getBoundingClientRect(), getComputedStyle(), innerText

Animation frames and scheduling

// do visual work in the frame that will paint it
let scheduled = false;

function scheduleRender() {
  if (scheduled) return;        // coalesce multiple calls into one frame
  scheduled = true;
  requestAnimationFrame(() => {
    scheduled = false;
    render();
  });
}

window.addEventListener('scroll', scheduleRender, { passive: true });

// let the browser finish a long task before inserting 500 rows
function insertInChunks(parent, nodes, chunk = 50) {
  let i = 0;
  function step() {
    const fragment = document.createDocumentFragment();
    for (let n = 0; n < chunk && i < nodes.length; n++, i++) fragment.append(nodes[i]);
    parent.append(fragment);
    if (i < nodes.length) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

• requestAnimationFrame runs before the next paint, which is exactly when a DOM write should happen.
• Coalescing with a boolean flag turns forty scroll events per second into at most one render per frame.
• For anything expensive that is not visual, prefer requestIdleCallback or a worker.
• Use CSS transitions and transforms where possible - a transform animation runs off the main thread, a width animation does not.

Listener and node leaks

// leaked: the listener holds the element, and window holds the listener
function mountWidget() {
  const widget = document.createElement('div');
  window.addEventListener('resize', () => widget.reposition());
  document.body.append(widget);
}

// fixed: scope the listener to the component's lifetime
function mountWidget() {
  const widget = document.createElement('div');
  const controller = new AbortController();

  window.addEventListener('resize', () => widget.reposition(), {
    signal: controller.signal,
  });

  widget.addEventListener('dispose', () => controller.abort());
  document.body.append(widget);
}

// a detached node is still retained by any live reference
const cache = new Map();

function show(id) {
  if (!cache.has(id)) {
    const el = buildPanel(id);
    document.body.append(el);
    cache.set(id, el);
  }
}

function hide(id) {
  cache.get(id)?.remove();      // removed from the DOM...
  cache.delete(id);             // ...and from the cache, or it lives forever
}

The DevTools memory panel is the way to confirm this rather than guess: take a heap snapshot, interact for a while, take another, and look for detached nodes whose count tracks the number of components you mounted and removed.

FAQ

Related

Templates, cloning and efficient rendering Geometry, scrolling and visibility

Last refreshed 2026-09-18.