jquery 최적화 방법

동적 테이블 생성하는 아래 두가지 방법으로 최적화 방법을 알아 본다.

- json 형태의 data

{

"names":[

{

"first":"Azzie",

"last":"Zalenski",

"street":"Niemann Cret",

"city":"VA"

},

// 1000 개 반복

]

}

- 첫번째 방법.

$.each(name, function(){

$('<tr>')

.append($('<td>').html(this.first) + ' ' +(this.last)))

.append($('<td>').html(this.street) + ' ' +(this.city))        

.appendTo('#nameTable');

});

 

<table id='nameTable'></table>

 

// 정상적으로 동작 하지만 속도가 떨어진다.

 

- 두번째 방법

var html = [], h = -1;

html[++h] = '<table>';

html[++h] = '<tbody>';

for( var name, i = -1; name = names[++i]; )

{

html[++h] = '<tr><td>';

html[++h] = name.first;

html[++h] = ' ';

html[++h] = name.last;

html[++h] = '</td><td>';

html[++h] = name.street;

html[++h] = ' ';

html[++h] = '</td></tr>';

}

html[++h] = '</tbody>';

html[++h] = '</table>';

 

$('#container')[0].innerHTML = html.join('');

 

<div id='container'></div>

// 첫번째 방법보다 IE7에서 테스트 결과 35배나 빠르다.

 

- 최적화 방법

1. 여러개의 <tr> 요소 대신 단일 <table> 또는 <tbody> 를 삽입한다.

2. DOM 조작 대신 .innerHTML 이나 .html() 을 사용한다.

3. 문자열 결합 대신 a[++i] 배열과 .join() 을 사용한다. (예전 version 의 브라우저일 경우)

코드 작성 시 문자열을 다루는 일은 모든 프로그램상에서 가장 많이 일어나는 반복적인 
행위이며, 그만큼 성능 최적화에 대해서도 고려를 가장 많이 해야 하는 부분이기도 합니다.
이전 브라우저들은 문자열 연산에 대해 지금과 같이 최적화를 하지 않았습니다.
문자열들을 연결한 결과를 만들기 위해서는 문자열과 문자열 사이에 각각의 문자열을 더한 
중간 문자열들을 만들어 메모리에 적재하였고, 또 이렇게 만들어진 중간문자열을 
매번 제거함으로써 결국 성능상 좋지 않은 결과를 가져왔습니다.

이 방법은 이전의 + 연산자를 사용한 문자열 연결보다 성능상 효율적입니다. 
이유는 이전 + 연산처럼 비효율적으로 중간 문자열을 담는 메모리를 만들고 지우는 
동작을 하지 않기 때문입니다. 
단, 최신 브라우저에서는 브라우저의 자바스크립트 엔진 최적화로 배열 기법을 사용하는 
것보다 + 연산자를 사용하는 것이 성능상 더 효율적입니다. 

배열 병합은 인터넷 익스플로러 7과 그 이전 버전에서 많은 문자열을 효과적으로 합칠 수 있는 유일한 방법입니다.
다시 말해, IE8 이전 버전은 배열기법이 좋으며, IE8 이후 버전에는 + 연산자를 활용한 
방법이 성능상 더 좋다는 것입니다. 
즉, 현재 서비스 하는 지역과 사용자의 IE 버전 분포도에 따라 문자열 연결에 방법을 
선택하는 것이 중요합니다.

4. $.each 대신 순수 for 루프를 사용한다.

팁) ++i 를 사용하자, 이는 몇몇 브라우저에서 i++ 보다 빠르다.

 

일련의 <tr> 요소들을 차례로 추가하는 대신 단일 DOM 연산으로 모든 자식을 갖는 단일 <table> 요소를 추가하도록 바꾼 것이

이번 코드에서 가장 큰 속도 향상을 가져다 준 부분이다. <--- 최적화 방법 1번 

문자열을 어떻게 붙이느냐에 따라 매우 빨라지거나 매우 느려질 수 있다. <-- 최적화 방법 2번

1000 개나 되는 항목의 루프 자체를 빠르게 하는 방법도 큰 효과를 가져온다. <-- 최적화 방법 4번

 

 

-------------------------------------------------------------------------------------------------------------------------

 

 

 

HTML요소의 css를 조작할 때, jQuery 보다 native api를 사용하는 것이 성능에 좋다.

  

1. BAD

      $('#myDiv').css('color', 'red');

      $('#myDiv').css('opacity', 1);

  2. BETTER

      $('#myDiv').css('color', 'red').css('opacity', 1);

  3. BEST

      var $myDiv = $('#myDiv');

      $myDiv.css('color', 'red');

      $myDiv.css('opacity', 1);

 1. BAD

      $.each(arr, function(i) {i/2; });

 2. BETTER

      arr.forEach(function(i) {i/2;});

 3. BEST

      var i=0, len = arr.length;

      for(i=0; i<len; i+=1)

      {

          i / 2;

      }

전역 변수 보다 지역 변수를 사용하는 것이 성능에 좋다.

 1. BAD

     var name = 'Toadd';

     function sayHello(){

alert(name);

     }

 2. BETTER

     function sayHello()

     {

var name = 'Toadd';

alert(name);

     }

 3. BEST

     var app = ( function() {

var _name = 'Toadd';

return {

sayHello : function() {

alert(_name);

}

}

    }());

    app.sayHello();

버튼 여러개에 이벤트 핸들러를 등록하는 것 보다 부모에 하나만 등록하는 것이 성능에 좋다.

  1. BAD

<button id='btn' onClick='sayHello();'> Click Me </button>

  2. BETTER

$(function(){

$('#btn').on('click', sayHello);

});

  3. BEST

$(document).on('click', 'button', sayHello);

 

js파일을 모듈 단위로 나누고 필요할 때 필요한 js파일을 로드하는 것이 성능에 좋다.

[출처] 자바스크립트 (javascript) 성능 관련 5가지 팁|작성자 서일영