onload, ready

해당 포스팅에서는 JavaScript의 onload와 ready에 대해 정리해 보고자 한다.

onload

자바스크립트에는 빠른 로딩속도를 위해 자바스크립트 구문을 나중에 따로 로드할 수 있는 함수를 지원한다. 그중 대표적 속성인 window.onload 는 HTML의 모든 태그를 불러온 이후 코드 내에 onload 가 있을 경우 읽어내게 된다.

하지만 onload 에는 크나큰 단점이 하나 있었다. 글자로만 이루어진 태그라면 상관없겠지만, 이미지나 영상이 포함되어있을 경우 상황이 매우 곤란해지기 때문이다. 이미지, 영상의 크기가 매우 크든 말든 두 미디어까지 모두 읽어낸 뒤의 시점이 바로 onload이다. 그러니 당연히 심각하게 느릴수밖에 없다. 그래서 이에 대한 대처로 나온것이 바로 JQuery의 document.ready이다.

document. ready

document. ready는 window.onload와 다르게 태그의 로드만을 감지한다. 즉 DOM트리 (DOM Tree) 의 로드만을 감지하며 이미지나 영상따위의 로드는 신경쓰지 않는다. 제이쿼리가 아주 오랫동안 사랑받았던 이유가 바로 이런 편리함때문이었다. 하지만 이것조차도 제이쿼리 cdn을 불러오지 않으면 사용할 수 없다는 단점이 있다.

$( document ).ready(function() {
  // Handler for .ready() called.
});

하지만 제이쿼리 역시 자바스크립트로 만들어진 프레임워크일 뿐이기 때문에, VanillaJS 만으로 이에 대한 대처는 충분히 가능하다. document.ready 하나 쓰려고 제이쿼리를 다운받는다든지 하는 멍청한 짓은 하지 말자.

참조
https://itun.tistory.com/510