퍼포먼스 향상 패턴을 사용하는 것이 왜 중요한가요?

• 프로그램 코드는 간단 명료해야지 엉성하게 만들면 안됩니다.
• 좋은 코딩 습관은 문제를 해결하는데 적합한 방법을 제공합니다.
• 퍼포먼스에 좋은 패턴을 사용하지 않고 코딩을 한다면 브라우저가 그 만큼 일을 더 많이 하게 됩니다.

..

퍼포먼스 향상 Tip 1

항상 최신 버전의 jQuery를 사용하세요

• 가능하다면 항상 최신 버전의 jQuery를 사용하세요
• 최신 버전은 이전 버전에 비해 성능이 향상되고 버그가 수정된 경우가 많습니다.
• jQuery 파일을 최신 버전으로 교체해도 문제가 생기는 경우는 많지 않은편입니다.

퍼포먼스 향상 Tip 4

꼭 필요한 경우가 아니라면 jQuery를 사용하지 마세요

• $() 를 한번 수행할 때마다 당연히 시간이 소요됩니다. 필요하지 않은 경우라면 안쓰는 것이 성능향상에 좋습니다. jQuery 대신 “보통의” 자바스크립트 코드를 사용하세요
• jQuery로 작성된 소스코드에 보통 자바스크립트 코드를 사용하면 안될 것 같은 느낌이 드신다면 전혀 걱정하지 않으셔도 됩니다. jQuery도 그냥 자바스크립트로 만들어진 함수입니다. jQuery와 보통 자바스크립트를 섞어쓰셔도 아무 문제가 없습니다.

1. $(‘a’).bind(‘click’, function () {
2.     console.log(‘You clicked: ‘ + $(this).attr(‘id’));
3. });

이렇게 작성하시지 마시고

1. $(‘a’).bind(‘click’, function () {
2.     console.log(‘You clicked: ‘ + this.id);
3. });

이렇게 작성하세요. function () {} 안에서 사용할 수 있는 this 는 a 태그가 만든 DOM 객체입니다. 여기에서 id 어트리뷰트에 접근하기 위해 $(this).attr(‘id’); 를 할 필요는 없습니다. 그냥 this.id 와 같이 DOM 객체 – 프로퍼티 접근방법을 사용하시면 되고, 더 빠릅니다.

퍼포먼스 향상 Tip 5

캐싱(Caching) 을 사용하세요. 위에서도 잠깐 말씀드렸지만 캐싱은 단지 나중에 다시 사용할 것 같은 “좀 시간이 걸렸던 작업” 을 변수에 저장해서 나중에 사용할 때는 그 시간이 걸렸던 작업을 다시 안해도 되게 해주는 패턴입니다.

이 글에서 말하는 캐싱은 셀렉터를 사용해 jQuery 객체를 만드는 작업을 캐싱하는 것입니다.

1. var parents = $(‘.parents’),    // caching
2.     children = $(‘.parents’).find(‘.child’),    // bad
3.     kids = parents.find(‘.child’);  // good

위 코드에서 children 변수는 캐싱해놓은 parents 변수를 사용하지 않고 $(‘.parents’)를 또 만들었습니다. kids 변수는 캐싱해놓은 parents 변수를 사용하고 그래서 children 보다 빠릅니다.

1. var foo = $(‘.item’).bind(‘click’, function () {
2.     foo.not(this).addClass(‘bar’)
3.                 .removeClass(‘foobar’)
4.                 .fadeOut(500);
5. });

위 코드는 $(‘.item’) 을 foo 라는 변수에 캐싱하고 있습니다. 그리고 $(‘.item’) 에 click 이벤트 핸들러로 등록해 놓은 함수안에서 foo 변수를 사용하고 있습니다. item 이라는 클래스를 가진 엘리먼트들이 클릭되었을 때 자기 자신만 빼고 나머지 item 들에 대해 addClass, removeClass, fadeOut 하는 코드입니다. 캐싱을 통해 성능도 향상되고 소스코드도 더 간결해 보이는 것 같습니다.

퍼포먼스 향상 Tip 6

메서드 체이닝을 사용하세요

1. var parents = $(‘.parents’).doSomething().doSomethingElse();

• 위 코드에서 doSomething() 메서드를 실행한 다음에 연달아서 doSomething() 메서드를 실행하고 있습니다. 이 것을 메서드 체이닝 또는 그냥 체이닝이라고 합니다.
• $(‘.parents’).doSomething(); $(‘.parents’).doSomethingElse(); 이렇게 두 번 한것과 같은 실행을 하면서 속도는 더 빠릅니다.
• 대부분의 jQuery 메서드들은 체이닝을 지원합니다. 체이닝이 가능해지는 원리는 간단합니다. $(‘.parents’).doSomething(); 의 실행결과 리턴값이 $(‘.parents’) 이기 때문에 거기에 연달아서 .을 찍고 doSomethingElse(); 를 실행해도 되는 것입니다.
• 코드도 짧아지고 가독성도 높아집니다. 아래의 코드처럼 엔터를 몇 번 쳐주면 가독성은 더 좋아집니다.

1. // Without chaining
2. $(‘#notification’).fadeIn(‘slow’);
3. $(‘#notification’).addClass(‘.activeNotification’);
4. $(‘#notification’).css(‘marginLeft’, ’50px’);
6. // With chaining
7. $(‘#notification’).fadeIn(‘slow’)
8.                 .addClass(‘.activeNotification’)
9.                 .css(‘marginLeft’, ’50px’);

퍼포먼스 향상 Tip 7

이벤트 위임(event delegation)을 사용하세요 이벤트 위임은 이벤트의 bubble 속성을 사용한 것입니다. A 엘리먼트에 이벤트 핸들러를 등록하고 싶을 때 그 엘리먼트에 바로 붙이지 않고 그보다 상위 엘리먼트에 B에 등록합니다. 이벤트가 A에서 발생했어도 B로 bubble 되어 올라가는데 이때 B에 등록된 핸들러에서 A에서 발생한 것인지 살펴보고 맞으면 이벤트 핸들러를 실행하는 방식이 이벤트 위임입니다.

몇몇 엘리먼트에 이벤트 핸들러를 등록할 때는 이벤트 위임이 별로 효과가 없습니다. 하지만 어떤 ul에 li가 100개 있는데 li에 click 이벤트 핸들러를 등록하는 경우가 있다면, li 하나하나마다 등록해서 이벤트 핸들러 100개를 만드는 것보다 ul에 이벤트 핸들러 하나를 등록하는 것이 성능면에서 좋을 것입니다.

jQuery에서 엘리먼트에 이벤트 핸들러를 등록하는데 사용되는 메서드는 엘리먼트에 직접 등록하는 .bind() 메서드, 이벤트 위임을 사용하는 .live() 메서드, .delegate() 메서드가 있습니다. 이때 .live() 보다는 .delegate() 가 성능면에서 더 좋습니다.

최근에 나온 jQuery 1.7 버전에는 이벤트를 등록할 수 있는 새로운 메서드인 .on() 메서드가 나왔습니다. 그리고 .bind(), .live(), .delegate() 메서드 모두 jQuery 내부적으로는 .on() 메서드를 사용하게 소스코드가 바뀌었습니다. 그래서 jQuery 1.7 이상 버전을 사용하신다면 여러 메서드들 중 하나를 선택하실 필요없이 그냥 .on() 메서드를 사용하시면 됩니다.

퍼포먼스 향상 Tip 8

DOM 에 노드를 추가하거나 삭제하는 작업은 최소화하는 것이 좋습니다.

• DOM 접근은 (성능면에서) 비용이 많이 드는 작업입니다.
• 이 것은 .append(), .insertBefore(), .insertAfter() 등의 메서드 사용을 최소화 하면 성능이 향상된다는 것을 의미합니다.
• 정보의 저장/조회 용도라면 .text(), .html() 보다 .data() 를 사용하는 것이 좋습니다.

Tip 1: 더 나은 .append() 사용법

• .append() 는 한 번만 사용할 수 있는 방법을 찾으십시오
• append를 여러 번 하는 것은 한 번 사용하는 것보다 90% 까지 느려질 수 있습니다. 그리고 캐싱되지 않은 jQuery 객체에 append 한다면 추가로 20%까지 느려집니다.

Tip 2: .detach() 를 사용하세요

• .detach() 는 노드를 DOM에서 제거하면서 캐싱합니다. 그래서 나중에 다시 DOM에 넣을 수 있습니다.
• 이벤트 핸들러가 많이 걸려있는 노드를 DOM에서 제거했다가 나중에 다시 넣는다면, 이벤트 핸들러를 다시 등록해줘야 할텐데 .detach() 를 사용하면 그냥 다시 DOM에 넣기만 하면 됩니다. .detach() 로 DOM에서 삭제하면 노드에 붙은 이벤트 핸들러 정보를 그대로 가지고 있기 때문입니다.
• .detach() 를 사용하지 않은 경우보다 60%까지 빠릅니다.

1. // .detach() example
2. $(‘p’).click(function () {
3.     $(this).toggleClass(‘off’);
4. });
6. var p;
7. $(‘button’).click(function () {
8.     if (p) {
9.         /* ..additional modification */
10.         p.appendTo(‘body’);
11.         p = null;
12.     } else {
13.         p = $(‘p’).detach();
14.     }
15. });

Tip 3: 더 나은 .data() 사용법

• 보통 .data() 메서드는 $(‘#elem’).data(key, value); 와 같은 형태로 사용합니다.
• 이보다는 $.data(elem, key, value); 처럼 사용하는 것이 더 빠릅니다. 여기서 첫 번째 인자인 elem은 var elem = document.getElementById(‘#elem’); 과 같이 만들어진 DOM 객체를 의미합니다.
• (jQuery 객체).data(..) 형태로 사용하는 것보다 $.data(DOM객체, ..) 형태로 사용하는 것이 더 빠르다는 의미입니다.
• 위에서 보신 것처럼 var elem; 을 DOM 객체로 만드는 수고가 한 번 더 들지만, 만약 미리 만들어 놓은 상황이라면 $.data() 를 사용하는 것이 더 빠릅니다.

퍼포먼스 향상 Tip 9

loop를 잘 사용하세요 – 반복문, jQuery 에서는 $.each() 와 .each()

• jQuery의 $.each() 와 .each() 보다 자바스크립트 본래의 for, while 문이 더 빠르다는 것을 알고 계신가요?
• jQuery의 loop는 편리하지만 항상 최고의 성능을 발휘하는 것은 아닙니다.
• 그리고 꼭 jQuery의 loop 가 아니더라도 프로그래밍을 할 때 가능하다면 반복문은 피하는 것이 좋습니다. loop는 느립니다.

퍼포먼스 향상 Tip 10

꼭 필요한 경우가 아니라면 jQuery 객체를 만들지 마세요

• 개발자들은 대체 가능한 더 간단한 방법이 있는 경우에도 jQuery 객체를 만들어 쓰곤 합니다. Tip 4 에서 살펴봤던 것처럼 $(this).attr(‘id’) 보다는 this.id 가 더 빠릅니다.
• $.method() 형태가 $.fn.method() 보다 빠릅니다. Tip 8 에서 살펴본 것처럼 $.data() 가 .data() 보다 빠릅니다. 그래서 가능하다면 이렇게 사용하면 좋습니다.
• 하지만 $.data() 를 사용하기 위해서는 역시 Tip 8 에서 살펴본 것처럼 DOM 객체를 미리 만들어 놔야 하므로, 상황에 따라 가능할 경우 그렇게 하면 됩니다.

보너스 Tip

DRY 하세요~ Don’t Repeat Yourself – 같은 코드를 반복적으로 사용하지 않는 방법을 연구하면 좋습니다.

간단한 예제 소스를 보겠습니다.

1. // Let’s store some default values to be read later
2. var defaultSettings = {};
3. defaultSettings[‘carModel’] = ‘Mercedes’;
4. defaultSettings[‘carYeasr’] = 2012;
5. defaultSettings[‘carMiles’] = 5000;
6. defaultSettings[‘carTint’] = ‘Metallic Blue’;
8. // Non-DRY code
9. $(‘.someCheckbox’).click(function () {
10.     if (this.checked) {
11.         $(‘#input_carModel’).val(defaultSettings.carModel);
12.         $(‘#input_carYear’).val(defaultSettings.carYear);
13.         $(‘#input_carMiles’).val(defaultSettings.carMiles);
14.         $(‘#input_carTint’).val(defaultSettings.carTint);
15.     } else {
16.         $(‘#input_carModel’).val(”);
17.         $(‘#input_carYear’).val(”);
18.         $(‘#input_carMiles’).val(”);
19.         $(‘#input_carTint’).val(”);
20.     }
21. });
23. // DRY code
24. var props = [‘carModel’, ‘carYear’, ‘carMiles’, ‘carTint’];
26. $(‘.someCheckbox’).click(function () {
27.     var checked = this.checked;
29.     /*
30.         Non-DRY code 에서는 무엇을 반복하고 있나요?
31.         1. input_ .. 형태로 생긴 field 명 들
32.         2. 값을 설정하기 위한 $(‘#input_ .. ‘).val(defaultSettings. .. );
33.         3. 값을 초기화하기 위한 $(‘#input_ .. ‘).val(”);
35.         DRY code 에서는 어떻게 바꿀 수 있나요?
36.         1. input_ .. 형태로 생긴 field 명 들을 자동으로 생성
37.         2. $.each 로 loop를 돌면서 key를 받아서 defaultSettings[key] 형태로 사용
38.         3. 삼항연산자를 사용해서 – checked ? 설정 : 초기화 – 코드를 간략하게 만듬
39.     */
41.     $.each(props, function (i, key) {
42.         $(‘#input_’ + key).val(checked ? defaultSettings[key] : ”);
43.     });
44. });