To improve dynamic web page performance, DOM operations must be optimized to reduce re-arrangement and redrawing. 1. Avoid direct operation of DOM in loops, and batch insertion should be used with DocumentFragment; 2. Cache DOM query results, give priority to using efficient selectors such as getElementById, and limit the query scope; 3. Use event delegation to bind event listening to the parent element to reduce memory consumption; 4. Separate read and write operations to avoid layout jitter caused by forced synchronous layout; 5. Animation prioritizes CSS transform and opacity, using GPU acceleration without triggering re-arrangement; 6. Block processing when a large number of DOM updates, release the main thread through setTimeout or requestIdleCallback to maintain the interface response. By minimizing DOM interaction and following the browser rendering mechanism, application performance can be significantly improved and smooth user experience can be ensured.

When building dynamic web applications, DOM manipulation is often a bottleneck for performance. Even small inefficiencies can lead to jank, slow rendering, and poor user experience—especially on lower-end devices. Optimizing how and when you interact with the DOM is essential for high-performance applications. Here's how to do it right.

Minimize Direct DOM Manipulation

Every time you access or modify the DOM, the browser may need to reccalculate styles and reflow the layout. Frequent or unecessary operations compound this cost.

Instead of updating the DOM in a loop:

 // Bad: Triggers reflect multiple times
for (let i = 0; i < items.length; i ) {
  const el = document.createElement(&#39;li&#39;);
  el.textContent = items[i];
  list.appendChild(el); // Reflow on each append
}

Batch your changes:

 // Good: One reflow at the end
const fragment = document.createDocumentFragment();
for (let i = 0; i < items.length; i ) {
  const el = document.createElement(&#39;li&#39;);
  el.textContent = items[i];
  fragment.appendChild(el);
}
list.appendChild(fragment); // Single reflow

Use DocumentFragment to build content off-DOM, then insert it once.

Use Efficient DOM Querying

Avoid querying the same elements repeatedly. Cache references when possible.

 // Bad: Repeated querying
function updateItems() {
  document.getElementById('list').style.color = 'blue';
  document.getElementById('list').textContent = 'Updated';
}

// Good: Cache the element
const listEl = document.getElementById('list');
function updateItems() {
  listEl.style.color = 'blue';
  listEl.textContent = 'Updated';
}

Prefer querySelector only when necessary. For simple selections (eg, ID, class, tag), built-in methods like getElementById , getElementsByClassName , or getElementsByTagName are faster and return live or static collections more efficiently.

Also, narrow your scope:

 // Better: Limit search within a known container
const container = document.getElementById('container');
const buttons = container.querySelectorAll('.btn');

Leverage Event Delegation

Instead of attaching event listeners to many individual elements, attach a single listener to a parent and use event bubbleing.

 // Bad: Many listeners
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handleItemClick);
});

// Good: One listener
list.addEventListener('click', (e) => {
  if (e.target.classList.contains('item')) {
    handleItemClick(e);
  }
});

This reduces memory usage and improves performance, especially with dynamic or large lists.

Avoid Forced Synchronous Layouts (Layout Thrashing)

Reading layout properties (like offsetHeight , getBoundingClientRect() ) forces the browser to sync the render tree. If followed by a write, it can trigger unecessary reflows.

 // Bad: Forces reflow on every iteration
for (let i = 0; i < items.length; i ) {
  const height = items[i].offsetHeight; // Read
  items[i].style.transform = `translateY(${height}px)`; // Write
}

Instead, separate reads and writes :

 // Good: Batch reads first, then writes
const heights = [];
for (let i = 0; i < items.length; i ) {
  heights.push(items[i].offsetHeight); // Read all first
}
for (let i = 0; i < items.length; i ) {
  items[i].style.transform = `translateY(${heights[i]}px)`; // Then write
}

This prevents the browser from reccalculating layout repeatedly.

Use CSS Transforms and Opacity for Animations

For animations, avoid changing layout-triggering properties like top , left , or width . These cause reflow and repaint.

Instead, use transform and opacity , which the browser can handle on the compositor thread (often GPU-accelerated):

 /* Preferred for performance */
.animated {
  transition: transform 0.3s, opacity 0.3s;
}
.animated.slide {
  transform: translateX(100px);
}

This results in smooth animations with minimal main-thread work.

Update DOM in Chunks for Large Changes

When dealing with thousands of elements, avoid blocking the main thread. Use requestIdleCallback or setTimeout to yield control and keep the UI responsive.

 function updateLargeList(items, callback) {
  const chunkSize = 100;
  let index = 0;

  function processChunk() {
    const endIndex = Math.min(index chunkSize, items.length);
    for (; index < endIndex; index ) {
      const el = document.createElement(&#39;li&#39;);
      el.textContent = items[index];
      list.appendChild(el);
    }

    if (index < items.length) {
      // Yield to main thread
      setTimeout(processChunk, 0);
    } else {
      callback();
    }
  }

  processChunk();
}

This keeps the interface usable during heavy updates.

Optimizing DOM manipulation isn't about doing less—it's about doing it smarter. By batching updates, minimizing reflows, using efficient selectors, and leveraging browser internals, you can dramatically improve performance. The key is to work with the browser, not against it.

Basically: touch the DOM as little as possible, and make those touches count .

The above is the detailed content of Optimizing DOM Manipulation for High Performance. For more information, please follow other related articles on the PHP Chinese website!