페이지 로드 전에 jQuery / 자바스크립트 실행하기
■ 문제점
튀지 않는(unobtrusive) 자바스크립트 방식을 사용하는 최근의 자바스크립트 어플리케이션들은 일반저긍로 DOM이 완전히 로드되고 난 후에만 자바스크립트 코드를 수행한다. 그리고 실제로도 모든 DOM이 완전히 로드되고 난후에만 자바스크립트 코드를 수행한다. 그리고 실제로도 모든 DOM 탐색과 조작은 그들이 동작하기에 앞서 DOM이 완전하게 로드되는 것을 요구하낟. 그렇기에, 우리는 클라이언트(일반적으로 웹 브라우저)가 DOM은 완전히 로드했으나 이미지나 *.swf 파일과 같은 모든 자원들을 아직 로드하지 못한 시점을 알아내기 위한 방법이 필요하다. 만일 이를 위해서 window.onload 이벤트를 사용한다면 모든 자원들을 포함하여 전체 문서가 완전히 로드되기 전까지는 onload 이벤트가 발생하지 않을 것이기에, 대부분의 웹 방문자로 하여금 지나치게 많은 시간을 기다리게 만들 것이다. 우리에게 필요한 것은 DOM 그 자체가 탐색과 조작을 위한 준비를 끝냈음을 알려주는 이벤트이다.
■ 해결방법
jQuery는 일반적으로 DOM의 document 개체에 바인드되는 사용자 저의 이벤트 처리기인 ready( ) 메서드를 제공한다. ready( ) 메서드는 ㄴ단일 매개변수로 함수를 갖는데, 이 함수 DOM이 탐색 및 조작도리 준비가 되면 실행되는 자바스크립 코드를 갖는다. 다음 코드는 페이지가 완전히 로드 되진 않지만 DOM이 준비되었을 경우 alert( ) 윈도우를 띄우는 간단한 예제다.
ex01.html |
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ex01</title> <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script> <script type="text/JavaScript"> jQuery(document).ready(function() { // DOM이 아직 로드되지 않았기에 ready 이벤트를 사용해야 한다. alert(jQuery('p').text()); }); </script> </head> <body> <p>The Dom is ready!</p> </body> </html> |
| 출력결과 |
■ 논의
ready( ) 이벤트 처리기 메서드는 자바스크립트의 핵심 이벤트인 window.onload 이벤트를 대신하여 jQuery가 제공하는 것이다. ready( ) 이벤트는 원하는 만큼 여러 번 사요오딜 수 있다. 이 사용자 정의 이벤트를 사용할 경우, 이 이벤트는 웹 페이지 내에서 스타일시트 선언부 다음에 두는 것이 좋다. 이렇게 하면 ready( ) 이벤트에 의해 jQuery 코드나 자바스크립트 코드가 실행되기 전에 모든 요소 속성들이 올바르게 정의될 것임을 보장할 수 있을 것이다.
추가적으로 jQuery는 ready 이벤트에 대한 단축표현도 제공한다. 다음 코드는 이러한 단축표현을 사용하여 alert( ) 예제를 작성한 것이다.
ex02.html |
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ex02</title> <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script> <script type="text/JavaScript"> jQuery(function() { // DOM이 아직 로드되지 않았기에 ready 이벤트를 사용해야 한다. alert(jQuery('p').text()); }); </script> </head> <body> <p>The Dom is ready!</p> </body> </html> |
출력결과 |
이러한 ready( ) 이벤트는 사실 자바스크립트가 페이지의 문서 흐름 상 가장 위쪽에 <head> 요소 안에 놓였인는 경우에만 필요하다. 필자는 ready( ) 이벤트를 즐겨 사용하지는 않는 편이다. 대신에 모든 자바스크립트와 인라인 코드 <body> 요소의 닫는 태그 바로 앞에 둔느 것을 좋아한다. 이렇게 하는 데는 두 가지 이유가 있다.
첫째로, 최근의 최적화 기술은 자바스크립트가 페이지의 끝부분에서 브라우저에 의해 로드되는 경우 페이지의 로드가 더 빨라진다고 말하고 있다. 즉, 웹 페이지의 밑부분에 자바스크립트 코드를 둔다면 브라우저가 자바스크립트를 로드하기에 앞서 스크립트 앞에 있는 모든 것들(태그들)을 로드한다는 것이다. 일반저긍로 대부분의 브라우저는 자바스크립트 엔진이 웹 페이지에 있는 자바스크립트를 컴파일할 때까지 다른 모든 로딩 처리를 중단하기 때문에 이는 더욱 효과적이다. 웹 페이지 문서의 상단에 자바스크립트를 둔다면 일종의 병목현상이 생길 수 있으니 말이다. 어떤 상황에서는 <head> 요소 안에 자바스크립트를 두는 것이 더 나을 수 있다는 것을 알지만, 솔직히 말해서 그것이 꼭 필요한 상황은 한 번도 본 적이 없다. 페이지 하단에 자바스크립트를 둠으로써, 개발하는 동안 발생한 문제들은 대부분 쉽게 해결되었고 최적화되었다.
둘째로, 빠른 웹 페이지가 목적이라면 간단하게 코드를 페이지의 하단으로 옮겨서 성능 향상을 이룰 수 있는데, 왜 그러한 작업을 복잡하게 꼬아야 하는 것인가? 많은 양의 코드와 적은 양의 코드 중 하나를 선택해야 한다면, 필자는 당연히 적은 야으이 코드를 선택할 것이다. ready( ) 이벤트를 사용하지 않는 것이 결과적으로 적은 양의 코드를 사용하게 되며, 적은 양의 코드는 많은 양의 코드보다 훨씬 빨리 실행된다.
ex03.html |
| <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ex03</title> </head> <body> <p>The Dom is ready!</p> <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script> <script type="text/JavaScript"> alert(jQuery('p').text()); // DOM이 로드되고 실행된다. </script> </body> </html> |
| 출력결과 |
모든 자바스크립트를 </body> 요소 앞에 두었다는 것에 주목하자. 모든 추가적인 마크업들은 HTML 문서 안에서 자바스크립트 위 쪽에 두어야만 한다.
'jQuery' 카테고리의 다른 글
| [jQuery] jQuery Ajax의 기초 (0) | 2015.05.10 |
|---|---|
| [jQuery] DOM 요소 선택하기 (0) | 2015.04.22 |
| [jQuery] jQuery를 사용한 객체 확장 (0) | 2013.09.10 |
| [jQuery] jQuery를 사용한 배열 관리 (0) | 2013.09.10 |
| [jQuery] jQuery 문법 (0) | 2013.02.22 |
