load와 DOMContentLoaded의 차이 확인

• 크롬 개발자 도구의 Network panel을 열면 하단에 DOMConentLoaded와 load를 확인할 수 있다. DOMConentLoaded가 더 빠르다.
• DOM Tree 분석이 끝나면 DOMConentLoaded 이벤트가 발생하며, 그 외 모든 자원(이미지 등)이 다 받아져서 브라우져에 렌더링(화면표시)까지 다 끝난 시점에 Load가 발생한다.
• 보통은 DOM tree가 다 만들어지면 DOM APIs를 통해 DOM에 접근할 수 있기 때문에, 대부분의 자바스크립트 코드는 DOMConentLoaded 이후에 동작하도록 구현한다.
• 이미지의 크기를 조정하는 등의 작업은 load가 끝난 후에 스크립트가 실행되어야 한다.

window.addEventListener("load", 콜백함수);

document.addEventListener("DOMContentLoaded", 콜백함수);