1.2 Dom은 로드되었지만 페이자가 로드되기 전에 jQuery/자바스크립트 실행하기

문제점

- 최근 javascript App 들은 일반적으로 DOM이 완전히 로드 된 후에 수행한다.

- window.onload 이벤트를 사용한다면 모든 자원들을 포함하여 전체 문서가 완전히 로드되기 전까지는 onload가 발생하지

않는다.

- 대부분 웹 방문자로 하여금 지나치게 많은 시간을 기다리게 만든다.

해결방법

- jQuery는 DOM의 document 개체에 바인드 되는 사용자 정의 이벤트 처리기인 ready() 메서드를 제공

- DOM이 완전히 로드 되진 않았지만 DOM이 준비된 경우

jQuery(document).ready(function() {

alert(jQuery('P').text());

});

</script>

<body>

<p> The DOM is ready!</p>

</body>

논의

- ready()이벤트는 원하는 만큼 여러 번 사용될 수 있다.

- 웹 페이지 내에서 스타일시트 선언부 다음에 두는 것이 좋다. 왜냐하면 ready() 이벤트에 의해 jQuery 코드나 자바스크립트

코드가 실행되기 전에 모든 요소 속성들이 올바르게 정의 될것이다.

- 이러한 ready 이벤트는 자바스크립트가 페이지의 문서 흐름 상 가장 위쪽에 <head> 요소 안에 놓여있는 경우에만 필요

- 이러한 방법은 사용하지 않는 편이고 <body> 요소의 닫는 태그 바로 앞에 두는 것을 선호한다.

이유는

1. 최근 최적화 기술은 자바스크립트가 페이지의 끝부분에서 브라우저에 의해 로드되는 경우 페이지 로드가 더 빨라짐.

즉 브라우저가 스크립트를 로드하기에 앞서 스크립트 앞에 있는 모든 것들(태그들)을 로드한다는 것.

2. 빠른 웹페이지가 목적이라면 간단하게 코드를 페이지의 하단으로 옮겨서 성능 향상을 하는것

ready를 쓰면 그만큼 코드의 양이 늘어난다.

백두산슛돌이