JQuery을 활용한 성능 향상 팁 1탄

오늘은 JQuery를 사용하면서 성능을 높일 수 있는 몇 가지 팁을 가져왔습니다.

1. DOM 캐싱

DOM 캐싱: DOM을 최초 탐색 시 변수에 저장해 두고 변수로 접근하는 방식

	// bad
	$('#el').hide();
	$('#el').val('this is #el');
	$('#el').show();

	// good 
	var $el = $('#el');     // jquery 객체 앞에는 변수명 앞에 $를 붙임 
	$el.hide();
	$el.val('this is #el');
	$el.show();

반복해서 접근되는 DOM이 있는 경우 해당 DOM을 변수에 저장함으로서 반복되는 DOM 접근을 피할 수 있습니다.

이는 특히 반복문과 같이 많은 DOM을 조작해야 하는 경우 jQuery가 매번 같은 DOM을 탐색하는 대신 내부 배열에 저장해 둔 DOM에 바로 접근함으로서 성능 향상에 도움이 됩니다.

	// bad: 매번 DOM 탐색으로 접근
	for (var i=0; i<100; i++){
     	$('form input').eq(i).addClass('form-control'); 
    }

	// good: DOM을 캐싱해두고 접근 
	var $inputs = $('form input');
	for (var i=0; i<100; i++){
     	$inputs.eq(i).addClass('form-control'); 
    }

2. DOM 최소 접근

	var itemList = ['item1', 'item2', 'item3', 'item4'];
	
	// bad: 각 li별 append() 사용
	for (var i=0; i<itemList.length; i++){
     	$('#list').append('<li>'+itemList[i]+'</li>'); 
    }
    
    // good: 마지막에 한번만 append() 사용
	var itemListEl = '';
	for (var i=0; i<itemList.length; i++){
     	itemListEl += '<li>'+itemList[i]+'</li>';
    }	
    $('#list').append(itemListEl); 

DOM을 직접 조작하는 것 보다는 먼저 데이터를 조작한 다음, 마지막에 한번에 DOM 반영을 하는 것이 성능적으로 이점이 있습니다.

위 bad 예시의 경우 append()가 매번 DOM 트리를 갱신하기 때문에 그만큼 리페인트/리플로우를 발생시켜 성능저하를 발생시킵니다.

3. 이벤트 위임

이벤트 위임: 자식 요소에 직접 이벤트를 바인딩하지 않고, 상위 요소에 바인딩하여 자식의 이벤트를 감지하는 방식

	// bad: 각 버튼별 이벤트 부여
    $('.btn').on('click', function() { 
    	// events...
    }
    
    // good: 부모에서 각 버튼에게 이벤트 부여
    $('#btnList').on('click', '.btn', function() { 
    	// events...
    }    

이벤트 위임 방식은 성능 뿐만 아니라 유지보수 측면에서도 이점을 갖습니다.
이벤트 핸들러를 여러 번 등록할 필요 없이 단 한 번만 등록하면 되며, 상위 요소가 이벤트를 감지하므로 이후에 새로 추가된 요소에도 이벤트를 따로 추가하지 않아도 됩니다.

결론 및 느낀점

jQuery를 사용하면, DOM을 탐색 및 조작할 때 매우 편리하다는 생각을 많이 합니다. 다만 아무래도 직접적으로 DOM을 만지다보니, 무분별한 사용은 성능저하를 일으킬 수 있습니다.

오늘은 개발하고 공부하면서 알게 된 jQuery 팁들을 정리해보았습니다. 앞으로도 추가로 유용한 팁들을 알게 된다면 모아서 새 포스팅에서 다뤄보도록 하겠습니다.