jquey ready? $(function(){});?
최근 자바스크립트 어플리케이션은 일반적으로 DOM이 완전히 로드된 후 코드를 수행한다.
이유는 코드에서 DOM탐색을 이용하는 경우가 자주 있으니까^^
따라서 웹 브라우저가 DOM은 완전히 로드했으나 이미지나 SWF파일 같은 자원들을 아직 로드하지 못한
시점을 알아내기 위한 방법이 필요합니다.
이를 위해서 window.onload를 이용한다면 자원을 포함한 전체문서 로드를 기다려야 하므로
기다리는 시간이 길어질 수 있습니다.
따라서 지금 필요한 건 DOM그 자체가 탐색과 조작을 위한 준비가 끝났다는 이벤트이고
그 역할을 해주는 것이 ready메서드 입니다.
<script>
jQuery( document ).ready( function(){
alert( jQuery( 'p' ).text() );
} );
</script>
<body>
<p>jQuery.ready실험</p>
</body>
ready()메서드는 window.onload이벤트를 대신하여 jQuery에서 제공해 주는 메서드입니다.
ready()메서드는 style선언을 한 이후에 사용하는 것이 좋습니다.
이유는 스타일시트가 다 로드된 후에 코드가 시작하는 것을 보장할 수 있으니까^^
ready()메서드에 대한 단축표현도 존재하는데 아래와 같습니다.
jQuery( function() {
// 실행 코드
} );
이런 ready()메서드는 사실 자바스크립트가 페이지의 <head>요소 안에 놓여 있을 경우만 필요합니다.
대신 자바스크립트 코드와 인라인코드를 <body>를 닫기 바로 전에 두면 됩니다.
jQuery.ready실험
이것은 선택의 문제로 볼 수 있지만 자바스크립트를 </body> 태그 바로 전에 넣는
이유를 간단히 요약하면 아래와 같습니다.
최근 최적화 기술은 자바스크립트가 페이지 끝부분에서 로드되는 경우 페이지의 로드가 더 빨라진다고 한다.
즉 앞에서 로드하는 것보다 뒤에서 하는 것을 브라우저가 더 좋아라 한다.
대분분의 브라우저는 자바스크립트 엔진이 웹페이지에 있는 자바스크립트를 컴파일 할때까지 중단하기
때문에 이런 처리가 더욱 효과적이라고 합니다.
물론 특정 상황에 따라 head에 넣을 수도 있겠죠^^
적은 량의 코드로 최적의 효과를 볼 수 있으니까
굳이 사용하지 않아도될 jQuery( document ).ready~ 등의 타이핑도 줄이고
일반적인 실행시간도 적게 드니 당연안 결론이겠죠.