1. 인덱스 캐싱 (Index Caching)

반복문에서 배열의 길이 또는 다른 반복 계산이 자주 사용되는 경우, 이를 반복문 외부에 캐싱하여 성능을 향상할 수 있습니다.
예제
캐싱 전:

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

캐싱 후:

  const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const length = arr.length;
for (let i = 0; i < length; i++) {
    console.log(arr[i]);
}

arr.length를 반복문 외부에서 한 번 계산하여 length 변수에 저장하고, 이를 반복문 내부에서 사용하면 성능이 향상됩니다.

2. 불필요한 계산 제거 (Eliminate Unnecessary Calculations)

반복문 내부에서 반복적으로 계산되는 값을 미리 계산하여 변수에 저장함으로써 성능을 향상시킬 수 있습니다.
예제
불필요한 계산:

  const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i] * Math.sqrt(arr.length));
}

불필요한 계산 제거 후:

  const arr = [1, 2, 3, 4, 5];
const sqrtLength = Math.sqrt(arr.length);
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i] * sqrtLength);
}

반복문 내부에서 Math.sqrt(arr.length)를 매번 계산하는 대신, 이를 한 번 계산하여 sqrtLength 변수에 저장하면 성능이 향상됩니다.

3. 적절한 반복문 선택 (Choose Appropriate Loop)

적절한 반복문을 선택함으로써 성능을 최적화할 수 있습니다. 예를 들어, 배열을 단순히 순회할 때는 for 루프보다 forEach, for...of 또는 다른 메서드를 사용하는 것이 좋습니다.
예제
일반 for 루프:

  const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

forEach 사용:

  const arr = [1, 2, 3, 4, 5];
arr.forEach(value => {
    console.log(value);
});

for...of 사용:

  const arr = [1, 2, 3, 4, 5];
for (const value of arr) {
    console.log(value);
}

일반적인 배열 순회에서는 forEach나 for...of가 간결하고, 내부 최적화 덕분에 성능이 더 좋을 수 있습니다.

4. 반복문 내부의 DOM 조작 최소화

DOM 조작은 매우 비용이 많이 드는 작업입니다. 반복문 내부에서 DOM 조작을 최소화하고, 가능한 한 번에 수행하는 것이 좋습니다.
예제
반복문 내부의 DOM 조작:

  const items = ['Item1', 'Item2', 'Item3'];
const list = document.getElementById('list');
for (let i = 0; i < items.length; i++) {
    const listItem = document.createElement('li');
    listItem.textContent = items[i];
    list.appendChild(listItem);
}

DOM 조작 최소화:

const items = ['Item1', 'Item2', 'Item3'];
const list = document.getElementById('list');
const fragment = document.createDocumentFragment();
for (let i = 0; i < items.length; i++) {
    const listItem = document.createElement('li');
    listItem.textContent = items[i];
    fragment.appendChild(listItem);
}
list.appendChild(fragment);

DOM 조작을 한 번만 수행하도록 DocumentFragment를 사용하면 성능이 향상됩니다.

5. 메모리 관리

객체 생성이나 배열 복사를 최소화하고, 필요 없는 변수는 적시에 해제하여 메모리를 효율적으로 관리합니다.
예제
메모리 관리:

const largeArray = new Array(1000000).fill(0);

필요한 부분만 작업

const processed = largeArray.map((val, idx) => idx % 2 === 0 ? val + 1 : val);

메모리 해제

largeArray.length = 0;

필요 없는 데이터를 적시에 해제하여 메모리를 효율적으로 사용할 수 있습니다.

6. 속도

for-type : 1.6ms
foreach : 9.8ms
for-in : 145.3ms
for-of : 24.7ms

출처