[JS] $(document).ready() 와 $(window).load()의 차이 ( feat. [Vue warn]: Cannot find element: )

Vue를 공부하던 도중 

[Vue warn]: Cannot find element: #app 에러가 떠서 window.onload= function(){} 을 사용해 에러를 고치었다.

기왕 하는 거

$(document).ready() 와 $(window).load()의 차이를 짧게 기록하고자 한다.

 

1. $(document).ready()

- 외부리소스/이미지와 상관없이 DOM이 생성 된 직후 바로 실행

- window.load() 보다 실행속도가 빠르고 중복사용/실행하여도 선언한 순서대로 실행됨

 

2. $(window).load()

- DOM의 표준 이벤트.

- HTML 로딩이 끝난 후 시작되며 화면에 필요한 모든 요소(css, js, image, etc .... ) 등이 웹 브라우저 메모리에 모두 올려진 다음에 실행이됨.

 

$(document).ready와 $(window).load 속도 비교차이를 위한 소스

 

실행 콘솔log

실제로 실행해보면 $(document).ready() 가 더 빠른 걸 확인 할 수 있다.