JavaScript DOM Manipulation

Photo by Mohammad Rahmani on Unsplash

DOM manipulation is a common task in web development, and doing it efficiently can improve the performance of your web applications. In this blog post, we’ll discuss tips for efficient DOM manipulation with JavaScript, accompanied by examples ranging from basic to advanced.

“Efficiency is doing better what is already being done.” — Peter Drucker

Tip 1: Use Document Fragments

Appending elements one by one to the DOM can cause multiple reflows and repaints, hurting performance. To avoid this, you can use document fragments, which allow you to create a lightweight document structure in memory and append it to the DOM in one operation.

Basic Example:

const fragment = document.createDocumentFragment();

for (let i = 1; i <= 5; i++) {
  const li = document.createElement("li");
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}

document.querySelector("ul").appendChild(fragment);

In this example, we create a document fragment, append list items to it, and then append the fragment to the ul element in the DOM.

Tip 2: Minimize Layout Thrashing

Layout thrashing occurs when you read and write to the DOM in quick succession, causing unnecessary reflows and repaints. To avoid this, you should batch your DOM reads and writes.

Get JavaScript-World’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Advanced Example:

const elements = document.querySelectorAll(".box");
const newDimensions = [];

// Batch DOM reads
elements.forEach((element) => {
  newDimensions.push(element.getBoundingClientRect().width);
});

// Batch DOM writes
elements.forEach((element, index) => {
  element.style.width = `${newDimensions[index] * 2}px`;
});

In this example, we first read the dimensions of all elements with the class box, and then we batch the DOM writes to update their width.

Tip 3: Use requestAnimationFrame for Animations

Using requestAnimationFrame for animations can help you achieve smoother animations by synchronizing updates with the browser's refresh rate.

Basic Example:

function animateElement(element, duration) {
  const start = performance.now();

  function update(timestamp) {
    const progress = (timestamp - start) / duration;
    element.style.transform = `translateX(${progress * 100}px)`;

    if (progress < 1) {
      requestAnimationFrame(update);
    }
  }

  requestAnimationFrame(update);
}

const element = document.querySelector(".box");
animateElement(element, 2000);

In this example, we create a simple animation function that moves an element horizontally using requestAnimationFrame.

Conclusion

Efficient DOM manipulation is key to creating high-performance web applications. By using document fragments, minimizing layout thrashing, and leveraging requestAnimationFrame for animations, you can optimize your JavaScript code and create smooth, responsive user experiences.

If you enjoyed the article and would like to show your support, be sure to:

👏 Applaud for the story (50 claps) to help this article get featured

👉Follow me on Medium

Check out more content on my Medium profile