-
자바스크립트 성능 최적화 #1 : 코드 스타일CODING/JavaScript 2018. 12. 19. 17:14
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"); 보다 빠름
정규표현식
탐색 대상을 축소하고 반복문의 경우, 정규 표현식을 변수 처리하여 컴파일 횟수를 축소한다.
예)
123456789// 탐색 대상 축소. trim 처리str.replace(/^\s+/, "").replace(/\s+$/, "");// 컴파일 횟수 축소var reg1 = /^\s+/;var reg2 = /\s+$/;for (var i=0; i<100; i++) {str.replace(reg1, "").replace(reg2, "");}cs 반복문
1) for-in은 사용하지 말것. 반복문 중 가장 느림
for-in 외의 반복문은 주어진 배열 객체를 배열의 특성에 맞게 순차적으로 모든 요소를 탐색한다.
반면 for-in 구문은 배열을 배열이 아닌 일반 객체로 취급하며, 반복 시점마다 객체의 모든 속성을 무작위로 탐색한다.
2) for문 안에서 Array.length를 직접 사용하지 것보다 선언 후 사용하는게 더 빠르다.
for문 안에서 length를 구하게되면 반복횟수만큼 length를 구하는 작업을 반복하게 된다.
예)
123456789var arr = [1, 2, 3];for (var i=0; i<arr.length; i++) {// ...}var len = arr.length;for (var i=0; i<len; i++) {// ...}cs 댓글