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를 쓰면 그만큼 코드의 양이 늘어난다.

1.5 DOM 요소의 래퍼 집합 필터링하기 (0)	2013.06.24
1.4 특정 컨텍스트 안에서 DOM 요소 선택하기 (0)	2013.06.24

내가하늘이다.