JavaScript optimization techniques

Edit Copy Hide

// Inefficient loop
for (let i = 0; i < arr.length; i++) {
  // ...
}

// Optimized loop
const length = arr.length;
for (let i = 0; i < length; i++) {
  // ...
}

Edit Copy Hide

// Inefficient loop
for (let i = 0; i < array.length; i++) {
  // ...
}

// Optimized loop
for (const item of array) {
  // ...
}

Edit Copy Hide

// Inefficient array includes
if (array.includes(value)) {
  // ...
}

// Efficient Set includes
const set = new Set(array);
if (set.has(value)) {
  // ...
}

Edit Copy Hide

// Inefficient DOM manipulation
const container = document.getElementById('container');
container.innerHTML += '<div>New Element</div>';

// Efficient DOM manipulation
const fragment = document.createDocumentFragment();
const newDiv = document.createElement('div');
newDiv.textContent = 'New Element';
fragment.appendChild(newDiv);
container.appendChild(fragment);

Edit Copy Hide

// Inefficient event handling
const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
  button.addEventListener('click', () => {
    // Handle click
  });
});

// Efficient event delegation
const container = document.getElementById('container');
container.addEventListener('click', event => {
  if (event.target.classList.contains('button')) {
    // Handle click
  }
});

Edit Copy Hide

// Inefficient calculations
for (let i = 0; i < array.length; i++) {
  const result = array[i] * 2;
  // ...
}

// Efficient caching
for (let i = 0; i < array.length; i++) {
  const currentValue = array[i];
  const result = currentValue * 2;
  // ...
}

Edit Copy Hide

// Create a new worker
const worker = new Worker('worker.js');

// Send data to the worker
worker.postMessage(data);

// Receive data from the worker
worker.onmessage = event => {
  const result = event.data;
  // Handle result
};

Edit Copy Hide

// Inefficient fetch
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // Handle data
  });

// Efficient fetch with caching
if (localStorage.getItem('cachedData')) {
  const cachedData = JSON.parse(localStorage.getItem('cachedData'));
  // Use cached data
} else {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      // Handle data
      localStorage.setItem('cachedData', JSON.stringify(data));
    });
}