window.onload
자바스크립트에는 빠른 로딩속도를 위해 자바스크립트 구문을 나중에 따로 로드할 수 있는 함수를 지원한다.
그중 대표적 속성인 window.onload 는 HTML의 모든 태그를 불러온 이후 코드 내에 onload 가 있을 경우 읽어내게 된다.
하지만 onload 에는 크나큰 단점이 하나 있었다.
글자로만 이루어진 태그라면 상관없겠지만, 이미지나 영상이 포함되어있을 경우 상황이 매우 곤란해지기 때문이다. 이미지, 영상의 크기가 매우 크든 말든 두 미디어까지 모두 읽어낸 뒤의 시점이 바로 onload이다. 그러니 당연히 심각하게 느릴수밖에 없다.
그래서 이에 대한 대처로 나온것이 바로 JQuery의 document.ready이다.
1 2 3 |
|
document. ready는 window.onload와 다르게 태그의 로드만을 감지한다. 즉 DOM트리 (DOM Tree) 의 로드만을 감지하며 이미지나 영상따위의 로드는 신경쓰지 않는다. 제이쿼리가 아주 오랫동안 사랑받았던 이유가 바로 이런 편리함때문이었다. 하지만 이것조차도 제이쿼리 cdn을 불러오지 않으면 사용할 수 없다는 단점이 있다.
하지만 제이쿼리 역시 자바스크립트로 만들어진 프레임워크일 뿐이기 때문에, VanillaJS 만으로 이에 대한 대처는 충분히 가능하다. document.ready 하나 쓰려고 제이쿼리를 다운받는다든지 하는 멍청한 짓은 하지 말자.
DOMContentLoaded
DOMContentLoaded는 addEventListener의 속성으로 쓰이게 된다.
1 2 3 4 | window.addEventListener('DOMContentLoaded', function() { // func(); }); | cs |
이 코드를 그대로 가져다 쓰기만 하면 제이쿼리의 document.ready와 크게 다를 바 없는 성능을 구현할 수 있다. 얼마전까지만 해도, 몇년 전만 해도 DOMContentLoaded의 사용이 많지는 않았다. 그 이유는 바로 ie8이하에서는 지원하지 않기 때문이다. 물론 ie8 이하의 PC가 웹사이트를 방문했을 경우 또다른 대처를 할 수 있게끔 콜백을 짜놓을수는 있다. 하지만 코드가 길어지고 귀찮은것은 물론 요즘같이 ie8 이하의 점유율이 대폭 낮아진 상태에서는 굳이 짜놓을 가치조차 없다. 이미 세계 최대의 플랫폼인 페이스북에서도 ie8 이하의 지원을 중단했다.