자바스크립트 성능 최적화 #1 : 코드 스타일

nhn은 이렇게 한다 자바스크립트 성능 이야기의 내용들을 발췌하였음

바로 활용할 수 있는 부분을만 추려서 요약한다.

코드 스타일 부분에서는 크게 아래 3가지를 통해 성능을 향상시킬 수 있다. 

• 변수, 객체 생성 및 접근
• 정규표현식
• 반복문

변수, 객체 생성 및 접근

1) 배열 생성 : var arr = []; 이 var arr = new Array() 보다 빠름

2) 배열 데이터 초기화 및 접근 : arr[i] = i;이 vs arr.push(i); 보다 빠름

3) 객체 생성 : var obj = {}; vs var obj = new Object(); 보다 빠름

4) 객체 데이터 초기화 및 접근 : obj.a = 1; vs obj["a"] = 1; 보다 빠름

5) 문자열 생성 : var str = "test"; vs var str = new String("test"); 보다 빠름

정규표현식

탐색 대상을 축소하고 반복문의 경우, 정규 표현식을 변수 처리하여 컴파일 횟수를 축소한다.

예)

// 탐색 대상 축소. trim 처리
str.replace(/^\s+/, "").replace(/\s+$/, "");
 
// 컴파일 횟수 축소
var reg1 = /^\s+/;
var reg2 = /\s+$/;
for (var i=0; i<100; i++) {
    str.replace(reg1, "").replace(reg2, "");
}

반복문

1) for-in은 사용하지 말것. 반복문 중 가장 느림

for-in 외의 반복문은 주어진 배열 객체를 배열의 특성에 맞게 순차적으로 모든 요소를 탐색한다.

반면 for-in 구문은 배열을 배열이 아닌 일반 객체로 취급하며, 반복 시점마다 객체의 모든 속성을 무작위로 탐색한다.

2) for문 안에서 Array.length를 직접 사용하지 것보다 선언 후 사용하는게 더 빠르다.

for문 안에서 length를 구하게되면 반복횟수만큼 length를 구하는 작업을 반복하게 된다.

예)

var arr = [1, 2, 3];
for (var i=0; i<arr.length; i++) {
    // ...
}
 
var len = arr.length;
for (var i=0; i<len; i++) {
    // ...
}