javascript Dom 로드 시 실행되는 이벤트

 

---

 

---

웹 페이지를 개발할 때 사용자의 이벤트에 따라 자바스크립트 코드를 실행시키는 경우도 존재하지만,

웹 문서가 로드되었을 때를 기점으로 자바스크립트를 실행하는 경우도 존재합니다.

오늘은 이 웹 문서가 로드되었을 때 자바스크립트를 로드하는 방법에 대해서 알아보도록 하겠습니다.

자바스크립트 로드될 때 웹 브라우저 [출처 : https://moz.com/blog/javascript-seo]

---

 

웹 문서를 로드하기 전 선행 과정

여러분들은 웹 브라우저가 웹 문서를 어떻게 로드하는지 아시고 계신가요?

 

사실 간단하게 보면 간단한 과정인데

본격적으로 공부를 하면 꽤 복잡해 집니다.

 

그래서 이번 포스팅에선 간략하게 알아볼 예정입니다.

(자세한 부분은 추후 포스팅하겠습니다)

 

일단, 처음 사용자는 어떠한 목적을 가지고 웹에 접근을 합니다.

저희는 날씨를 알아보려고 웹에 접근했다고 가정을 해보죠

 

 

 

그럼 사용자는 해당 주소를 가지고 웹 문서에 접근을 시도하게 됩니다.

 

그럼 웹 브라우저는 해당 주소에 도메인을 가지고 있는 서버에 접근하여

웹 문서를 달라고 말합니다.

 

 

그럼 이제 서버는 해당 웹 브라우저에 요청에 따라

HTML과 CSS, JAVASCRIPT, 이미지, 폰트 등 필요한 리소스를 웹 브라우저에 전송을 하게 됩니다.

 

 

자 그럼 서버에서 가져온 리소스들은 웹 브라우저가 가질 수 있게 되었습니다.

 

 

여기서부터 자바스크립트가 로드될 때를 개발자가 설정해 줄 수 있습니다.

그 첫 번째로 먼저 로드되는 것을 알아보겠습니다.

---

DOMContentLoaded

해당 이벤트는 Document 객체에 등록할 수 있는 이벤트로

웹 브라우저가 HTML을 DOM 트리 형식으로 만들고 난 후에 호출됩니다.

 

아래 그림을 한번 보도록 하죠.

 

HTML을 읽은 웹 브라우저는 Dom Tree를 만듭니다.

이렇게 Dom Tree가 다 만들어 진 후 웹 브라우저에선

DOMContentLoaded를 실행시켜달라고 요청합니다.

 

그럼 자바스크립트는 DOMContentLoaded를 실행하게 되죠

 

 

 

그림으로 봤을 때 이해가 쉬울지 모르겠습니다.

즉, 간단하게 말하면

브라우저에 HTML만 존재한다는 이야기 이고,

그 외 나머지 리소스는 자바스크립트가 접근할 수 없다는 이야기입니다.

 

이미지가 이해가 안가는 사람들이 있을수 있으니

소스를 한번 확인해 볼까요?

 

See the Pen DOMContentLoaded by HyeonJun, Bang (@noogoonaa) on CodePen.

 

어떠신가요? 

이미지가 로드되지 않고 alert가 나타나죠?

(만약! 이미지가 먼저 뜬다면, 우측 상단에 Edit on CodePen을 클릭 후 직접 실행해 보시길 바랍니다.)

그 후 확인 버튼을 누르면 이미지가 나타납니다.

 

그렇습니다.

DOMContentLoaded는 스타일이나 이미지 등을 전혀 불러오지 않고,

오로지 로드된 HTML로만 접근하기 때문에 이러한 현상이 발생하는 것입니다.

그래서 이미지를 가져오기 전에 Alert가 발생한 것이지요.

 

그렇기 때문에 DOMContentLoaded는 직접적으로 이미지나 스타일 등의 접근하지 않는 기능을 적용해 주어야 합니다.

예를 들어서 모듈 초기화하여 Dom에 추가하거나, 노드의 이벤트 핸들러 등록 등을 할 수 있겠네요.

---

Load

해당 이벤트는 Window객체에 등록할 수 있는 이벤트로

웹 브라우저가 HTML, 스타일, 폰트, 이미지 등을 다 렌더링 한 후에 호출됩니다.

 

이번에도 그림을 먼저 한번 보도록 하겠습니다.

 

웹 브라우저는 CSS와 이미지 등을 전부 렌더링 한 후 

자바스크립트에 Load를 실행해 달라고 요청합니다.

 

그럼 자바스크립트는 이 요청에 응해 Load를 호출하게 되죠

 

 

이 때문에 이전 DOMContentLoaded와는 다르게 모든 스타일과 리소스 등 의 접근할 있고,

조작 또한 가능하게 됩니다.

 

자 그럼 이번에도 소스를 한번 확인해 볼까요?

See the Pen load by HyeonJun, Bang (@noogoonaa) on CodePen.

이번에는 정상적으로 이미지가 렌더링 된 후 Alert가 실행되는 것을 확인할 수 있습니다.

이렇듯 Load를 사용하면 좀 더 완벽한 Dom에 접근할 수 있게 됩니다.

 

그래서 이 이벤트는 이미지의 사이즈나, 조작, DOM 스타일을 변경하는 경우에 사용됩니다.

다만 속도 측면에서는 DOMContentLoaded보다 느릴 수밖에 없습니다.

왜냐하면 모든 리소스가 다 정상적으로 로드될 때까지 기다려야 하기 때문이죠.

---

마무리

오늘은 DOMContentLoaded와 Load에 대해서 알아보았습니다.

이러한 이벤트는 자주 사용하는 이벤트이기 때문에 꼭 알아두셨으면 합니다.

 

다음에는 더 좋은 포스트를 가져오겠습니다.

만약 포스트에 문제가 있거나 틀린 부분이 있다면 댓글을 남겨주시기 바랍니다.

감사합니다.