DOMContentLoaded 이벤트

• 들어가기 전에 로딩 이후에 자바스크립트 동작이 이뤄지는 것이 일반적입니다. 자바스크립트가 실행돼야 할 가장 적절한 타이밍은 언제일까요?

---

학습 목표

1. DOM ContentLoaded 이벤트를 이해한다.
2. Load와의 차이점을 이해한다.

핵심 개념

• DOMContentLoaded

학습하기

Load와 DOMContentLoaded의 차이 확인

웹사이트에 접속해서 크롬 개발자도구로 이를 확인할 수 있습니다. 크롬 개발자도구의 Network panel을 열어서 하단에 DOMContentLoaded, load를 확인해보세요. 두 개의 시간이 조금 다릅니다. DOM Tree 분석이 끝나면 DOMContentLoaded 이벤트가 발생하며, 그 외 모든 자원이 다 받아져서 브라우저에 렌더링(화면 표시)까지 다 끝난 시점에는 Load가 발생합니다. 이를 이해하고, 필요한 시점에 두 개의 이벤트를 사용해서 자바스크립트 실행을 할 수 있습니다. 보통 DOM tree가 다 만들어지면 DOM APIs를 통해서 DOM에 접근할 수 있기 때문에, 실제로 실무에서는 대부분의 자바스크립트코드는 DOMContentLoaded 이후에 동작하도록 구현합니다. 그 방법이 로딩속도 성능에 유리하다고 생각하기 때문입니다.

DOMContentLoaded 예제

document.addEventListener("DOMContentLoaded", function() { startSomething(); initFoo(); initBar(); var el = document.querySelector("div"); });

생각해보기

1. load 이벤트 이후에 작업하는 게 좋은 건 어떤 걸까요?