- 들어가기 전에
로딩 이후에 자바스크립트 동작이 이루어지는 것이 일반적이다. 자바스크립트가 실행되어야할 가장 적절한 타이밍은 언제일까?
- 학습 목표
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 |
댓글