본문 바로가기
Progamming/BoostCourse

DOMContentLoaded 이벤트

by 동그란 혜주 2019. 2. 12.
  • 들어가기 전에

로딩 이후에 자바스크립트 동작이 이루어지는 것이 일반적이다. 자바스크립트가 실행되어야할 가장 적절한 타이밍은 언제일까?




  • 학습 목표

1. DOMContentLoaded 이벤트를 이해한다.

2. Load와의 차이점을 이해한다.




  • 핵심 개념

- DOMContentLoaded




  • load와 DOMContentLoaded의 차이 확인

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

'Progamming > BoostCourse' 카테고리의 다른 글

HTML templationg  (0) 2019.02.12
Event delegation  (0) 2019.02.12
서비스 개발을 위한 디렉토리 구성  (0) 2019.02.12
CSS3 transition 활용  (0) 2019.02.12
requestAnimationFrame 활용  (0) 2019.02.11

댓글