[JS] 문서의 로드 시점(onload, DOMContentLoaded)

 

 

 

 

 

 

 

onload

• 외부자원과 이미지 로드가 모두 끝났을때 발생
• 초기 렌더링 이전에 호출하고 싶을 때 사용

window.onload = () => {
  console.log('hello, world!');
};

 

 

 

 

DOMContentLoaded

• DOM이 로드가 끝났을때 발생
• 초기 렌더링 이후에 호출하고 싶을 때 사용
• 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생
• 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않는다.

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
});