티스토리 뷰

jQurey

[Jquery,Javascript] window.load() vs document.ready() 차이 (추가 DOMContentLoaded event vs document load event의 차이점)

jeongah story 2020. 2. 24. 01:39

 

 

[Jquery] window.load() vs document.ready()  차이

 

 

1. $(document).ready() - ready 는 DOM이 완성된 이후에 호출되는 함수이다.

$(document).ready(function(){ alert('READY'); }); 

 

  • onload 이벤트보다 먼저 발생한다. 즉, 문서의 모든 자원이 다운로드되었을때 발생하는 onload와 달리 DOM 트리만 완성되면 바로 발생하므로 빠른 실행속도가 필요할때 적합하다.
  • 여러번 사용되면 선언 순서에 따라 순차적으로 실행된다.

 

 

 

 

2. $(window).load() - load 는 img와 같은 다른 요소(모든페이지 구성요소)가 모두 load된 이후에 호출되는 함수이다.

동일한 문서에 오직 onload는 하나만 존재해야 한다


사용방법 ex )

$(window).load(function(){ alert('LOAD'); });  

<body onload="실행될 코드">

document.getElementById("myFrame").onload = function() { //실행될 코드 }

window.addEventListener('load', function(){ //실행될 코드 });

window.addEventListener('DOMContentLoaded', function(){ //실행될 코드 })

 

 

3. 차이점

 

1) 호출 시점의 차이 : 한 페이지에 두 함수가 다 있다면 실행 우선순위 (.ready() → .onload() 순으로 실행)
          .ready() 호출시점 : DOM Tree 생성 완료 후
          .onload() 호출시점 : 모든 페이지 구성요소 페인팅 완료 후

 

ex )

 

<script type="text/javascript">

window.onload=function() {

    alert("ccc");

}

$(document).ready(function() {

     alert("aaa");

});

$(document).ready(function() {

    alert("bbb");

});

</script>

 

동작순서는 aaa->bbb->ccc 순서로 나타나게 됩니다.



출처: https://hahahoho5915.tistory.com/28 [넌 잘하고 있어], https://m.blog.naver.com/PostView.nhn?blogId=weekamp&logNo=220776670269&proxyReferer=https%3A%2F%2Fwww.google.com%2F 

, https://webdir.tistory.com/515 [WEBDIR]

 

 

 

 

 

 

DOMContentLoaded event vs document load event

 

 

 

 

DOMContentLoaded이벤트 :

초기 HTML 문서가 완전히 스타일 시트, 이미지를 기다리지 않고,로드 및 구문 분석되어 화재 및 서브 프레임로드를 완료합니다.

 

load 이벤트 :

전체 페이지가로드되면 이벤트는 같은 스타일 시트 및 이미지와 같은 모든 종속 리소스를 포함하여 발생합니다.

이는 DOMContentLoaded리소스가로드를 완료 할 때까지 기다리지 않고 페이지 DOM이로드 되 자마자 실행되는 것과 대조적 입니다.

 

See the Pen 웹 브라우저에서의 자바스크립트 실행 순서 by jeongahlee (@jeongahlee) on CodePen.

 

 

웹 브라우저에서의 자바스크립트 실행 순서

  1. 웹 페이지를 열면 가장 먼저 Window객체가 생성됩니다. Window 객체는 웹 페이지의 전역 객체로 웹 페이지와 탭마다 생성됩니다.
  2. Document 객체(readyState프로퍼티 : HTML문서의 해석 상태를 뜻하는 문자열이 저장, 초기값: "loading" 문자열)가 Window객체의 프로퍼티로 생성되며 웹페이지를 해석해서 DOM 트리의 구축을 시도합니다.
  3. HTML문서는 HTML구문을 작성 순서에 따라 분석하며 Document객체 요소와 텍스트 노드를 추가해 나갑니다.
  4. HTML문서 안에 script요소 안의 코드 또는 외부파일에 저장된 코드의 구문을 분석합니다. (script 요소의 구문을 분석해서 실행 할 때는 HTML문서의 구문 분석이 일시적으로 막히고, 자바스크립트 코드의 실행을 완료한 후에는 일시적으로 막혀 있던 HTML 문서의 구문분석을 재개 합니다.)
  5. HTML 문서의 모든 내용을 읽은 후, DOM 트리 구축을 완료하면 document.readyState 프로퍼티 값이 "interactive" 로 바뀝니다.
  6. 웹 브라우저는 Document 객체에 DOM트리 구축완료를 알리기 위해 DOMCONTENTLOADED이벤트를 발생시킵니다.
  7. img 요소가 있을시, 이미지 파일 등의 외부 리소스를 이 시점에 읽어 들입니다.
  8. 모든 리소스를 읽어 들인 후 document.readyState 프로퍼티 값이 "complete"로 바뀝니다. 마지막으로 웹 브라우저는 Window객체를 상대로 load 이벤트를 발생시킵니다.
  9. ㅣ 시점부터 다양한 이벤트(사용자 정의, 네트워크) 를 수신하며, 이벤트가 발생하면 이벤트 처리기가 비동기로 호출합니다.

 

'jQurey' 카테고리의 다른 글

[jQuery] checkbox value  (0) 2021.04.13
[UI][JQuery] select box without input box  (0) 2021.03.27
[JQuery] 이미지 첨부파일  (0) 2021.03.16
[Jquery] select, radio, checkbox 컨트롤  (3) 2020.02.24
JS jQuery Animation(JS 제이쿼리 애니메이션)  (4) 2019.03.06
댓글
© 2018 eh2world