Fast jQuery : 10원짜리 허접팁
Posted by 시리니Jul 18
아아, 여러분 오랫만입니다. 이렇게 블로그에 글을 올리는 게 '오랫만' 이라고 느낄 정도로 한 동안 뜸했었네요. 블로깅 소재는 많은데 막상 쓰려니 묘하게 집중이 잘 안되고, 이래 저래 노는 시간은 많은데 GR Series 작업까지 하기엔 살짝 힘든, 뭐 그런 어정쩡한 나날을 보내고 있습니다.
그래서, 오늘은 현재 진행중인 프로젝트에서 얻은 10원짜리 노하우를 빌미로 포스팅을 한 번 해보려고 합니다. 거창한 것도 아니고, 대단하지도 않지만 간단하게 쓰기엔 좋을 것 같아서 소개할까 합니다. :)
jQuery 는 Javascript 프레임워크로서, Prototype.js 가 선풍적인 인기를 얻기 시작할 무렵에 혜성처럼 등장해서 순식간에 Javascript 프레임워크계를 평정한 기린아 입니다. 직관적인 설계와 독특한 Chaining 시스템, 강력한 Selector 등은 웹 개발자들로 하여금 더 이상 Javascript 를 베껴쓰는 언어가 아닌, "개발 가능한" 언어로 다시 돌아보겠금 해주었습니다.
뭐, jQuery 가 대단한 것은 비단 이것 뿐이 아니지만, 여기서 jQuery 의 위대함에 대해 설명하기에는 자리가 적절치 않은 것 같고, 해서 오늘은 원래 목표대로 10원짜리 허접팁을 공개할까 합니다.
참, 들어가기 전에 초간단 팁 먼저... 아래 소개해 드릴 예제들 중 HTML 객체에 대한 작업을 하기 위해선 먼저 브라우저가 HTML 문서를 다 읽은 후일때만 가능합니다. #someTarget 이라는 ID 를 가진 객체에 대한 작업을 하기 위해서는 먼저 그 객체가 있어야 하는 것 처럼 말이죠. 이를 위한 jQuery 식 방법은 이렇습니다.
위 코드는 HTML 문서를 다 읽고 난 후에, someTarget 이란 ID 값을 가지는 객체의 DISPLAY 속성을 NONE 으로 바꾸라는 의미입니다. $(function(){ ~~~ }); 구문이 하는 역할은 실제 Javascript 에서는 아래와 같습니다만, 아래 구문과 달리 여러 번 호출해도 별 문제 없이 문서 로딩 이후 동작을 한다는 게 다릅니다.
위의 내용을 기본으로 알고 계시는 분들은 아래 팁들도 그저 그럴 겁니다. ^^; 만약 위 내용이 조금 생소하신 분들이라면, 어쩌면 도움이 될지도 모르겠습니다. 자 그럼 본격적으로 하나씩 살펴 보도록 할까요?
Chaining 이란, 쉽게 생각하면 한 번 호출된 메소드의 반환값은 언제나 jQuery 객체 자신이 되어서 후에 연이어 메소드가 호출되어도 계속 반환된 jQuery 객체를 이용하여 콤비네이션을 줄 수 있다는 것입니다. 이는 불필요한 변수 선언 등을 없앨 수 있고, 코드의 직관성을 높일 수 있는 획기적인 방법이기도 합니다.
문제는 Chaining 기법을 쓰지 않고 동일 객체에 대한 여러 작업들을 해야 할 경우입니다. 작업하다 보면 이런 일들이 빈번하게 발생하는데, 저의 경우도 그렇지만 사실 대부분의 경우 jQuery 셀렉터를 그냥 계속 반복적으로 선언해서 사용합니다. 별로 느려지지 않으니까요. IE 6 을 제외하곤, 말이지요. =ㅁ=;;
IE 6 의 경우 $("#someDivElement") 를 매번 계속 호출하는 것은 성능에 직접적인 악영향을 미칠 수도 있습니다. 브라우저 설계 자체가 오래되기도 했고, Javascript 처리 속도도 느리니 오죽하겠습니까만은, 그래도 PC방에서 IE 6 으로 접속할 사람들을 위해서 $("#someDivElement") 를 계속 호출해서 바로 쓰지 말고, 한 번 var ele = $("#someDivElement") 처럼 일단 jQuery 객체로 저장해두고, 다음 번에는 ele.css("color", "red") 처럼 사용해 보는 것을 권장합니다.
그래서 반복적인 작업 등을 위한 문서를 찾던 중, each() 메소드의 활용에 대해 관심을 가지게 되었고, 실제로 프로젝트에 적용한 결과 놀라운 생산성을 확인해 볼 수 있었습니다. 이미 아시는 분들은 별로 흥미롭지 않으실 수 도 있겠지만, 이번에 처음 접하시는 분들을 위해 간단한 예를 들어보겠습니다.
HTML 문서에 아래와 같은 구문이 있다고 합시다.
위 구문에서 목록 #1~3 의 글자 색상을 바꾸고 싶을때, 어떻게 해야 할까요? CSS 를 활용한다면 매우 쉽게 해결 할 수 있는 문제이지만, Javascript 로 처리해야 한다고 가정한다면 은근히 골치 아픈 문제가 될 수 도 있습니다. 순수하게 Javascript 만으로 접근하자면, 우선 someElement 에 대한 객체를 document.getElementById 로 만들고 자식 노드에 대해서 하나씩 순회하면서 작업을 해야 할 겁니다.
그러나 jQuery 를 이용한다면 그렇게 번잡한 노동은 필요 없습니다. 그냥 아래 처럼 하면 됩니다.
딱 3줄만 써주면 나머지는 jQuery 가 알아서 해줍니다. "할 일" 에만 집중하면 나머지 부수적인 "작업순서" 는 몰라도 좋습니다. 위에서 $(this) 는 현재 작업중인 jQuery 객체를 반환합니다. 아까 HTML 태그 상에서 li 태그들 하나 하나를 지정하는 객체라고 여기시면 되겠습니다. function(index) 에서 index 는 매 순회시 자동으로 1씩 증가하는 변수를 지정한 것입니다. 반복 작업 중에서 번호를 할당할 필요가 있을 때 특히 유용하지요.
좀 더 실전적인 예를 하나 더 들어 보겠습니다. 문서 내에서 어떤 특정한 영역 내에 속한 그림들에 대하여, 해당 그림들에 링크를 거는 작업을 한다고 해 봅시다. 지정된 영역 속에 그림은 1개가 될 수도 있고, 여러 개가 될 수도 있으며, 여러분들은 몇 개가 될지, ID 는 있는지 등에 대해서는 알 수 없다고 가정합니다.
저는 게시판 글보기 영역에서, 실제 본문 내용이 나타나는 #contentElement 에 속한 그림들에 대해 작업을 한다고 가정해 보겠습니다.
jQuery 를 이용해서 이제부터 그림들에 대한 링크 걸기 작업을 해보도록 하겠습니다. 제가 예로 보여드리는 아래 코드들은 효율성 추구보다는 보여주기식 코드이므로, 실제 작업하실 때에는 보다 효율성 있는 코드 작성을 목표로 하시는 것을 추천합니다. :)
위 처럼 작성하시면 #contentElement 에 속한 모든 그림 태그들에 대해 해당 그림 경로를 주소로 가지는 링크 그림들로 전부 대체가 됩니다. .insertAfter() 이나 .remove() 혹은 .attr() 메소드들에 대해서는 설령 잘 모르시더라도 메소드명만 보면 대략 어떤 식으로 동작하는 녀석인지 감을 잡으실 수 있습니다. (잘 모르셔도 괜찮습니다! jquery.com 의 documentation 을 열람해 보세요!)
다시 정리하면, Javascript 로 반복적인 작업을 하기 위해서는 jQuery 의 .each() 메소드를 활용하자 입니다. 매우 쉽고, 직관적이며, 강력합니다!
jQuery 의 Selector 는 강력합니다. CSS 에서 사용하는 셀렉팅 문법을 거의 그대로 지원하는데다, jQuery 에서 확장 정의한 셀렉팅 문법까지 제공하기 때문에 셀렉팅이 어떨 때는 마법처럼 느껴질 때도 있습니다. 그래서 아래와 같은 셀렉팅도 당연히 가능합니다.
보시는 것 처럼 객체의 클래스명으로 셀렉팅을 하는 방법입니다. 여러 단계로 범위를 축소 시킬 수도 있으므로 위의 예보다 더 한 셀렉팅도 할 수 있습니다. 그리고 대부분의 브라우저에서는, 저마다 속도의 차이는 조금씩 있겠지만 대체적으로 빠르게 셀렉팅 됩니다. IE 6 을 제외하고 말이지요. -_-;;;
IE 6 에서는 문제가 좀 심각해 집니다. 문서 내에 속한 모든 객체들을 일일이 검사하고, 클래스명과 매칭되는 것들을 한 번 반환한 다음에 다시 그 중에서 다음 클래스명과 매칭되는 것들을 찾고, 다시 반환하고... 이러한 작업들이 오래 전에 만들어진 Javascript 엔진에 의해서 동작하기 때문에 굉장히 느려집니다. Javascript 소스 코드만 1,000 라인 넘게 들어가는 페이지에서 실제로 위 문제 때문에 페이지 로딩 속도가 2~3초 정도까지 떨어진 적이 있었습니다.
실제 프로젝트를 진행하면서 위와 같은 문제에 봉착한 저희 팀은, PL 형의 지휘 아래 조사에 착수했고, IE 6 전용 속도 측정기 등을 설치 한 후 병목점을 찾기 위해서 고군분투 했었습니다. 다른 브라우저에서는 대체로 빠르게 동작했기 때문에 저희는 Javascript 혹은 HTML 구문상 오류로 늦어진 것이라 확신하고 원인을 찾았지요.
그렇게 찾던 중... 우연히 jQuery 의 다중 셀렉팅에 뭔가 문제가 있지 않나 하는 실마리를 건지게 되었고, PL 형의 분석을 거쳐 제가 확인 작업을 위한 코드 변경을 한 후에 저희는 놀라지 않을 수 가 없었습니다!
IE 6 에서 2~3 초 정도 버벅임을 보여주던 페이지가 0.x 초 대로 단번에 속도 향상을 이루어 낸 것입니다! 원인은 아까 위에서 소개해 드린 것 처럼, CLASS 명을 이용한 다중 셀렉팅 때문 이었습니다. jQuery 문제라기 보단, 사실 IE 6 의 Javascript 엔진이 후달려서 그런 것이라고 생각 됩니다. 다만 다른 브라우저들도 동작 속도가 빨라서 그렇지, 사실 동일한 문제점을 안고 있다고 생각한다면 CLASS 명을 이용한 다중 셀렉팅은 지양해야 한다고 생각 됩니다.
저는 개선을 위해서 우선 문서 내에 각종 객체들 중, Javascript 작업이 필요한 대부분의 객체들에 고유한 ID 값을 부여했습니다. 그리고 jQuery 에서는 더 이상 클래스명으로 다중 셀렉팅을 하지 않고, ID 값을 이용하여 직접적인 셀렉팅을 했습니다. 문서 전체를 다시 리팩토링 하는 것이기 때문에 작업은 고되었지만 결과는 대만족이었지요. 여러분들도 웹페이지 설계 하실 때 되도록이면 ID 값들을 지정해주는 습관을 들여두시는 것을 적극 추천합니다. :)
제가 소개해 드릴 빠른 jQuery 를 위한 10원짜리 허접팁은 여기서 끝입니다. 10원짜리 팁이 되었는지 1원짜리 팁이 되었는지는 모르겠지만 오늘 이 시간에도 계속 웹 개발을 위해 노력하시는 모든 분들에게 조금이라도 도움이 되었으면 하는 바램으로 간만에 포스팅을 마치도록 하겠습니다. ^^;;;
앞으로는 좀 더 자주 뵐 수 있도록 노력할께요~ 그럼 다음 글에서 만나요~ (제발~)
그래서, 오늘은 현재 진행중인 프로젝트에서 얻은 10원짜리 노하우를 빌미로 포스팅을 한 번 해보려고 합니다. 거창한 것도 아니고, 대단하지도 않지만 간단하게 쓰기엔 좋을 것 같아서 소개할까 합니다. :)
jQuery 는 Javascript 프레임워크로서, Prototype.js 가 선풍적인 인기를 얻기 시작할 무렵에 혜성처럼 등장해서 순식간에 Javascript 프레임워크계를 평정한 기린아 입니다. 직관적인 설계와 독특한 Chaining 시스템, 강력한 Selector 등은 웹 개발자들로 하여금 더 이상 Javascript 를 베껴쓰는 언어가 아닌, "개발 가능한" 언어로 다시 돌아보겠금 해주었습니다.
뭐, jQuery 가 대단한 것은 비단 이것 뿐이 아니지만, 여기서 jQuery 의 위대함에 대해 설명하기에는 자리가 적절치 않은 것 같고, 해서 오늘은 원래 목표대로 10원짜리 허접팁을 공개할까 합니다.
참, 들어가기 전에 초간단 팁 먼저... 아래 소개해 드릴 예제들 중 HTML 객체에 대한 작업을 하기 위해선 먼저 브라우저가 HTML 문서를 다 읽은 후일때만 가능합니다. #someTarget 이라는 ID 를 가진 객체에 대한 작업을 하기 위해서는 먼저 그 객체가 있어야 하는 것 처럼 말이죠. 이를 위한 jQuery 식 방법은 이렇습니다.
$(function(){
$("#someTarget").css("display", "none");
});
$("#someTarget").css("display", "none");
});
위 코드는 HTML 문서를 다 읽고 난 후에, someTarget 이란 ID 값을 가지는 객체의 DISPLAY 속성을 NONE 으로 바꾸라는 의미입니다. $(function(){ ~~~ }); 구문이 하는 역할은 실제 Javascript 에서는 아래와 같습니다만, 아래 구문과 달리 여러 번 호출해도 별 문제 없이 문서 로딩 이후 동작을 한다는 게 다릅니다.
window.onload = function() {
document.getElementById("someTarget").style.display = 'none';
}
document.getElementById("someTarget").style.display = 'none';
}
위의 내용을 기본으로 알고 계시는 분들은 아래 팁들도 그저 그럴 겁니다. ^^; 만약 위 내용이 조금 생소하신 분들이라면, 어쩌면 도움이 될지도 모르겠습니다. 자 그럼 본격적으로 하나씩 살펴 보도록 할까요?
1. 셀렉팅된 jQuery 변수를 저장해서 쓰기
jQuery 의 Selector 는 강력합니다. $("#someDivElement") 라고 명시해 주기만 하면 ID 값이 someDivElement 인 객체를 jQuery 객체로 반환하지요. Chaining 시스템은 위 객체에 대한 여러 가지 작업들을 한 번에 할 수 있도록 해주고 있습니다. 아래 처럼 말입니다.
$("#someDivElement").css("color", "red").fadeIn("slow");
Chaining 이란, 쉽게 생각하면 한 번 호출된 메소드의 반환값은 언제나 jQuery 객체 자신이 되어서 후에 연이어 메소드가 호출되어도 계속 반환된 jQuery 객체를 이용하여 콤비네이션을 줄 수 있다는 것입니다. 이는 불필요한 변수 선언 등을 없앨 수 있고, 코드의 직관성을 높일 수 있는 획기적인 방법이기도 합니다.
문제는 Chaining 기법을 쓰지 않고 동일 객체에 대한 여러 작업들을 해야 할 경우입니다. 작업하다 보면 이런 일들이 빈번하게 발생하는데, 저의 경우도 그렇지만 사실 대부분의 경우 jQuery 셀렉터를 그냥 계속 반복적으로 선언해서 사용합니다. 별로 느려지지 않으니까요. IE 6 을 제외하곤, 말이지요. =ㅁ=;;
IE 6 의 경우 $("#someDivElement") 를 매번 계속 호출하는 것은 성능에 직접적인 악영향을 미칠 수도 있습니다. 브라우저 설계 자체가 오래되기도 했고, Javascript 처리 속도도 느리니 오죽하겠습니까만은, 그래도 PC방에서 IE 6 으로 접속할 사람들을 위해서 $("#someDivElement") 를 계속 호출해서 바로 쓰지 말고, 한 번 var ele = $("#someDivElement") 처럼 일단 jQuery 객체로 저장해두고, 다음 번에는 ele.css("color", "red") 처럼 사용해 보는 것을 권장합니다.
2. 반복적인 작업은 .each() 메소드를 활용하기
사실 고백하건데, 저는 jQuery 를 프로젝트 투입 전까지는 제대로 알지도 못했고 활용 범위도 지극히 제한적이었습니다. 기껏 써 봤자 .css() 메소드를 활용하거나 .fadeIn() 등의 기본적인 이펙트 구현 위주였지요. 그러나 이번에 투입된 프로젝트에서는 Ajax 활용 범위가 넓었고 Javascript 를 효율적으로 활용하지 않으면 성능상 문제가 생겼기 때문에 마냥 jQuery 를 대충 쓸 수는 없었습니다.그래서 반복적인 작업 등을 위한 문서를 찾던 중, each() 메소드의 활용에 대해 관심을 가지게 되었고, 실제로 프로젝트에 적용한 결과 놀라운 생산성을 확인해 볼 수 있었습니다. 이미 아시는 분들은 별로 흥미롭지 않으실 수 도 있겠지만, 이번에 처음 접하시는 분들을 위해 간단한 예를 들어보겠습니다.
HTML 문서에 아래와 같은 구문이 있다고 합시다.
<ul id="someElement">
<li>목록 #1</li>
<li>목록 #2</li>
<li>목록 #3</li>
</ul>
<li>목록 #1</li>
<li>목록 #2</li>
<li>목록 #3</li>
</ul>
위 구문에서 목록 #1~3 의 글자 색상을 바꾸고 싶을때, 어떻게 해야 할까요? CSS 를 활용한다면 매우 쉽게 해결 할 수 있는 문제이지만, Javascript 로 처리해야 한다고 가정한다면 은근히 골치 아픈 문제가 될 수 도 있습니다. 순수하게 Javascript 만으로 접근하자면, 우선 someElement 에 대한 객체를 document.getElementById 로 만들고 자식 노드에 대해서 하나씩 순회하면서 작업을 해야 할 겁니다.
그러나 jQuery 를 이용한다면 그렇게 번잡한 노동은 필요 없습니다. 그냥 아래 처럼 하면 됩니다.
$("#someElement li").each(function(index){
$(this).css("color", "green");
});
$(this).css("color", "green");
});
딱 3줄만 써주면 나머지는 jQuery 가 알아서 해줍니다. "할 일" 에만 집중하면 나머지 부수적인 "작업순서" 는 몰라도 좋습니다. 위에서 $(this) 는 현재 작업중인 jQuery 객체를 반환합니다. 아까 HTML 태그 상에서 li 태그들 하나 하나를 지정하는 객체라고 여기시면 되겠습니다. function(index) 에서 index 는 매 순회시 자동으로 1씩 증가하는 변수를 지정한 것입니다. 반복 작업 중에서 번호를 할당할 필요가 있을 때 특히 유용하지요.
좀 더 실전적인 예를 하나 더 들어 보겠습니다. 문서 내에서 어떤 특정한 영역 내에 속한 그림들에 대하여, 해당 그림들에 링크를 거는 작업을 한다고 해 봅시다. 지정된 영역 속에 그림은 1개가 될 수도 있고, 여러 개가 될 수도 있으며, 여러분들은 몇 개가 될지, ID 는 있는지 등에 대해서는 알 수 없다고 가정합니다.
저는 게시판 글보기 영역에서, 실제 본문 내용이 나타나는 #contentElement 에 속한 그림들에 대해 작업을 한다고 가정해 보겠습니다.
<div id="contentElement">
본문 내용 솰라솰라~~~ <img src="~~~" alt="~~" /> 솰라솰라~~~ <img ... />
어쩌구 저쩌구~~~ <img src... /> 우왕ㅋ굳ㅋ 솰라솰라~~~
</div>
본문 내용 솰라솰라~~~ <img src="~~~" alt="~~" /> 솰라솰라~~~ <img ... />
어쩌구 저쩌구~~~ <img src... /> 우왕ㅋ굳ㅋ 솰라솰라~~~
</div>
jQuery 를 이용해서 이제부터 그림들에 대한 링크 걸기 작업을 해보도록 하겠습니다. 제가 예로 보여드리는 아래 코드들은 효율성 추구보다는 보여주기식 코드이므로, 실제 작업하실 때에는 보다 효율성 있는 코드 작성을 목표로 하시는 것을 추천합니다. :)
// HTML 문서 로딩 후 작업할 내용 실행
$(function(){
$("#contentElement img").each(function(index){
var src = $j(this).attr("src"); // 그림의 경로 저장
var alt = $j(this).attr("alt"); // 그림의 대체 문자 저장
var link = '<a href="'+src+'"><img src="'+src+'" alt="'+alt+'" /></a>'; // 그림에 링크 붙이기
$(link).insertAfter( $(this) ); // 현재 셀렉팅된 그림 객체 바로 뒤에 link 객체를 붙이기
$(this).remove(); // 현재 셀렉팅된 그림 객체는 지우기
});
});
$(function(){
$("#contentElement img").each(function(index){
var src = $j(this).attr("src"); // 그림의 경로 저장
var alt = $j(this).attr("alt"); // 그림의 대체 문자 저장
var link = '<a href="'+src+'"><img src="'+src+'" alt="'+alt+'" /></a>'; // 그림에 링크 붙이기
$(link).insertAfter( $(this) ); // 현재 셀렉팅된 그림 객체 바로 뒤에 link 객체를 붙이기
$(this).remove(); // 현재 셀렉팅된 그림 객체는 지우기
});
});
위 처럼 작성하시면 #contentElement 에 속한 모든 그림 태그들에 대해 해당 그림 경로를 주소로 가지는 링크 그림들로 전부 대체가 됩니다. .insertAfter() 이나 .remove() 혹은 .attr() 메소드들에 대해서는 설령 잘 모르시더라도 메소드명만 보면 대략 어떤 식으로 동작하는 녀석인지 감을 잡으실 수 있습니다. (잘 모르셔도 괜찮습니다! jquery.com 의 documentation 을 열람해 보세요!)
다시 정리하면, Javascript 로 반복적인 작업을 하기 위해서는 jQuery 의 .each() 메소드를 활용하자 입니다. 매우 쉽고, 직관적이며, 강력합니다!
3. 되도록이면 #ID 로 접근하기
오늘의 가장 간단하면서도 중요한 팁이 되겠습니다. 사실 이 문제가 별 거 아닌 것 처럼 보이시겠지만 이번에 작업한 프로젝트의 페이지 로딩 속도를 최대 70배 가까이 끌어올릴 수 있었던 요인이기 때문에 제일 마지막에 소개를 해 드립니다.jQuery 의 Selector 는 강력합니다. CSS 에서 사용하는 셀렉팅 문법을 거의 그대로 지원하는데다, jQuery 에서 확장 정의한 셀렉팅 문법까지 제공하기 때문에 셀렉팅이 어떨 때는 마법처럼 느껴질 때도 있습니다. 그래서 아래와 같은 셀렉팅도 당연히 가능합니다.
$(".someParent .someChild .someTarget .someDiv .someSpan .someHref")
보시는 것 처럼 객체의 클래스명으로 셀렉팅을 하는 방법입니다. 여러 단계로 범위를 축소 시킬 수도 있으므로 위의 예보다 더 한 셀렉팅도 할 수 있습니다. 그리고 대부분의 브라우저에서는, 저마다 속도의 차이는 조금씩 있겠지만 대체적으로 빠르게 셀렉팅 됩니다. IE 6 을 제외하고 말이지요. -_-;;;
IE 6 에서는 문제가 좀 심각해 집니다. 문서 내에 속한 모든 객체들을 일일이 검사하고, 클래스명과 매칭되는 것들을 한 번 반환한 다음에 다시 그 중에서 다음 클래스명과 매칭되는 것들을 찾고, 다시 반환하고... 이러한 작업들이 오래 전에 만들어진 Javascript 엔진에 의해서 동작하기 때문에 굉장히 느려집니다. Javascript 소스 코드만 1,000 라인 넘게 들어가는 페이지에서 실제로 위 문제 때문에 페이지 로딩 속도가 2~3초 정도까지 떨어진 적이 있었습니다.
실제 프로젝트를 진행하면서 위와 같은 문제에 봉착한 저희 팀은, PL 형의 지휘 아래 조사에 착수했고, IE 6 전용 속도 측정기 등을 설치 한 후 병목점을 찾기 위해서 고군분투 했었습니다. 다른 브라우저에서는 대체로 빠르게 동작했기 때문에 저희는 Javascript 혹은 HTML 구문상 오류로 늦어진 것이라 확신하고 원인을 찾았지요.
그렇게 찾던 중... 우연히 jQuery 의 다중 셀렉팅에 뭔가 문제가 있지 않나 하는 실마리를 건지게 되었고, PL 형의 분석을 거쳐 제가 확인 작업을 위한 코드 변경을 한 후에 저희는 놀라지 않을 수 가 없었습니다!
IE 6 에서 2~3 초 정도 버벅임을 보여주던 페이지가 0.x 초 대로 단번에 속도 향상을 이루어 낸 것입니다! 원인은 아까 위에서 소개해 드린 것 처럼, CLASS 명을 이용한 다중 셀렉팅 때문 이었습니다. jQuery 문제라기 보단, 사실 IE 6 의 Javascript 엔진이 후달려서 그런 것이라고 생각 됩니다. 다만 다른 브라우저들도 동작 속도가 빨라서 그렇지, 사실 동일한 문제점을 안고 있다고 생각한다면 CLASS 명을 이용한 다중 셀렉팅은 지양해야 한다고 생각 됩니다.
저는 개선을 위해서 우선 문서 내에 각종 객체들 중, Javascript 작업이 필요한 대부분의 객체들에 고유한 ID 값을 부여했습니다. 그리고 jQuery 에서는 더 이상 클래스명으로 다중 셀렉팅을 하지 않고, ID 값을 이용하여 직접적인 셀렉팅을 했습니다. 문서 전체를 다시 리팩토링 하는 것이기 때문에 작업은 고되었지만 결과는 대만족이었지요. 여러분들도 웹페이지 설계 하실 때 되도록이면 ID 값들을 지정해주는 습관을 들여두시는 것을 적극 추천합니다. :)
제가 소개해 드릴 빠른 jQuery 를 위한 10원짜리 허접팁은 여기서 끝입니다. 10원짜리 팁이 되었는지 1원짜리 팁이 되었는지는 모르겠지만 오늘 이 시간에도 계속 웹 개발을 위해 노력하시는 모든 분들에게 조금이라도 도움이 되었으면 하는 바램으로 간만에 포스팅을 마치도록 하겠습니다. ^^;;;
앞으로는 좀 더 자주 뵐 수 있도록 노력할께요~ 그럼 다음 글에서 만나요~ (제발~)
2 Responses
[h0ney] DELETE REPLY*
[시리니] DELETE