javascript 성능 향상 팁

다들 웹개발을 할때 떼어놓을수 없는 언어중 하나가 javascript가 아닐까 한다요즘엔 세상이 좋아져서 여러가지 라이브러리들을 많이 나오고 있는데 물론 나 역시jQuery 를 자주 이용한다… 이유는 단하나! 편하니까..native 로 코딩하면 상당히 불편하기 때문에 그걸 어느 정도 간소화해준다고나 할까..하지만 jQuery 라도 native 를 먼저 알아야 라이브러리도 쉽게 쓰는법..js 코딩을 하면서 javascript 성능 향상 팁 을 소개한다. 
1. Loop문
많은 사람들이 루프문을 사용할때 for문이나 while 을 많이 사용할것이다.그중에 for문을 제일 많이 쓸텐데 아래 코드를 보자

for (var i=; i < array.length; i++) {
//code
}

여기서 length 는 배열의 길이를 반환해주는데 요게 단점이 뭐냐면매순간 루프를 돌때마다 length 라는 메소드가 계속 호출된다는거다.성능 향상을 위해서는 아래처럼 array.length를 꼭 변수에 담아 사용해야 한다.

var arrLength = array.length;
for (i=0; i < arrLength; i++) {
//code
}

2. 지역변수를 잘 쓰자

var test = document.getElementById("test")
test2 = document.getElementById("test")

var doc = document;
var test = doc.getElementById("test")
test2 = doc.getElementById("test2")

두 개의 코드를 딱 봐도 뭐가 다른지 알수 있을것이다. document 객체를 doc 라는변수에 할당을 해놓음으로써 doc가 참조될 때,  스코프 체인을 돌면서 찾는다

 

3. 왠만하면 DOM 건들지 말자
이건 솔직히 나도 잘 안지켜지는 부분인데 클라이언트의 요청이나 협업(?)을 하다보면어쩔수 없으 발생을 하는 부분인거 같다.자바스크립트 최적화 하면 일단 dom 이 제일 이슈다..;;why???빌어먹을 reflow (브라우저가 dom 을 다시 렌더링하는 과정)때문이다.js를 통해 어떤 dom 의 width 값이나 top 등 을 변경하면 브라우저는 변경된 코드를적용해서 페이지를 또 렌더링해야한다. 물론 dom 요소가 추가 및 제거될떄도 reflow 는 발생한다.이 부분에 대한 유용한 솔루션은 documentFragment라는 녀석을 사용하는 것이다.documentFragment는 기본적으로 브라우저에 의해 화면상으로 표시되지 않는많은 이점을 가져다 주고 브라우저가 reflow하지 않게 해준다.별거 없고 뭔말이냐 하면 연산을 미리하고 나서 view 단에 dom 을 변경하자는 거다예를 들어서 div 객체를 1 개 생성하고 그 안에 a 태그 객체를  1000 개 생성한다고 치자;;이것을 알고리즘 수립과 코드로 옮기는 과정에서 사람마다 각각 다를것이다.
A 님의 알고리즘
1. div 생성한다.2. body 에 넣는다.3. 아. a 도 생성해야지4.  이제 div 에다가 넣을 차례구나.. 아..x1000번 넣어야되네
A님의 코드

var div = $('

 

').appendTo('body');
for( var i=1; i<=1000; i++ ){
    $('A'+i+'').appendTo(div);
}

B님의 알고리즘
1. div 생성한다.2. a도 생성해야지3. div에다가 a를 x1000 번 넣어볼까4. body 에 div 넣자
B님의 코드

var div = $('

 

');
for( var i=1; i<=1000; i++ ){
    $('A'+i+'').appendTo(div);
}
div.appendTo('body');

A와 B의 차이점은 body 에 div Element가 언제 들어가느냐다A는 div를는시작과 함께  Body 에 들어가서 매번 a를 추가하는 반면에B는 div 를 먼저 만들어 놓고 a를 추가한 후 맨 마지막에 body 에 추가 했다.전자는 reflow 가 1001 번 일어나고 두번째는 reflow 가 1번 일어나게 된다.body 안에 들어가지 않은 객체는 단지 메모리에 생성된 아주 가벼운 형태로 존재하며,이 상태에서 자식을 추가하는 행위는 view 영역에 아무런 영향을 주지 않게 되어reflow 가 발생하지 않는다.

 

4. 연산자 상황봐가면서 쓰자
아래 코드는 극단적인 예를 들었으며 1000개가 아닌 작은배열을돌릴때는 그 결과가 아주 미비하다.. 하지만 배열이 큰 건인 경우 예를 들어한 100 단위 1000단위로 돌리면 브라우저가 뻗거나 수 초동안 버벅댄다

var str;
for (i=0; i < 1000; i++) {
   str += 'test'+i+'test2';
}

그래서 큰 단위를 돌리떄는 가급적이면 Array와 push 그리고 join을 사용한다

var arr = [];
for (i=0; i < 1000; i++) {
   arr.push('test1', i, 'test2');
}
var str = arr.join('');

위 코드는 배열을 사용할때의 메소드들을 사용하여 처리했기때문에결과값이 훨씬 빠르다.