Code Performance & Optimization with JavaScript

You are reading Part 26 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 5]

Introduction

Writing efficient JavaScript code is crucial for improving performance, especially in web applications. Key areas of optimization include minimizing memory usage, reducing unnecessary reflows, understanding the event loop, and preventing memory leaks.

1. Minimizing Memory Usage

Efficient memory management helps avoid performance bottlenecks and excessive resource consumption.

Techniques for Reducing Memory Usage:

• Use Local Variables Instead of Global Variables – Global variables remain in memory throughout execution.

  function processData() {
      let localData = "temporary data"; // This gets garbage collected after function execution
  }
  processData();
  

• Release Unused Variables – Explicitly set variables to null when they are no longer needed.

  let largeArray = [/* large data set */];
  // After processing
  largeArray = null; // Helps garbage collector free memory
  

• Avoid Unnecessary Data Copies – Pass objects by reference instead of creating unnecessary copies.

  function updateUser(user) {
      user.name = "New Name";
  }
  let person = { name: "John" };
  updateUser(person); // Modifies original object without creating a copy
  

2. Reducing Reflows & Repaints

Reflows occur when the browser recalculates the positions and dimensions of elements. Excessive reflows slow down page performance.

Best Practices to Reduce Reflows:

• Batch DOM Updates – Minimize DOM interactions by grouping updates.

  let list = document.getElementById("list");
  let fragment = document.createDocumentFragment();
  for (let i = 0; i < 100; i++) {
      let item = document.createElement("li");
      item.textContent = `Item ${i}`;
      fragment.appendChild(item);
  }
  list.appendChild(fragment); // Single reflow instead of 100
  

• Avoid Layout Thrashing – Minimize repeated reads and writes to the DOM.

  let height = element.offsetHeight; // Forces layout calculation
  element.style.height = height + "px"; // Modify after reading to avoid thrashing
  

• Use CSS Instead of JavaScript for Animations – Hardware-accelerated animations are smoother.

  @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
  }
  .animate {
      animation: fadeIn 1s ease-in;
  }
  

3. Understanding the Event Loop

The event loop is crucial for handling asynchronous operations in JavaScript.

How the Event Loop Works:

1. The Call Stack executes synchronous code.

2. Web APIs handle asynchronous tasks (e.g., setTimeout, fetch).

3. Completed tasks move to the Callback Queue or Microtask Queue.

4. The Event Loop continuously checks if the call stack is empty before executing tasks from the queues.

Example of Event Loop Execution:

console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
Promise.resolve().then(() => console.log("Promise"));
console.log("End");

Expected Output:

Start
End
Promise
Timeout

• Promise callbacks (microtasks) execute before setTimeout (macrotasks).

4. Avoiding Memory Leaks

Memory leaks occur when memory is not released properly, leading to excessive memory usage.

Common Causes of Memory Leaks & Fixes:

• Unused Event Listeners – Remove event listeners when they are no longer needed.

  function handleClick() {
      console.log("Clicked!");
  }
  let button = document.getElementById("myButton");
  button.addEventListener("click", handleClick);
  // Remove listener when no longer needed
  button.removeEventListener("click", handleClick);
  

• Detached DOM Elements – Avoid references to removed DOM elements.

  let div = document.createElement("div");
  document.body.appendChild(div);
  document.body.removeChild(div);
  div = null; // Remove reference to allow garbage collection
  

• Closures Holding References – Be cautious when closures retain references unnecessarily.

  function createHandler() {
      let element = document.getElementById("myElement");
      return function() {
          console.log(element.id);
      };
  }
  let handler = createHandler();
  handler = null; // Remove reference
  

You are reading Part 26 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 5]