DomContentLoaded와 Load

• 브라우저의 실행과정

DOM Tree 분석 > DOM ContentLoaded > 렌더링(화면표시 - 이미지 다운로드) > Load

Load 이후에 JS가 실행되면 이미지가 다 다운로드되고 그려진 상태이므로

조작하는 과정에서 로딩성능이 불리함

렌더링이 다 끝나지 않아도, DOM Tree가 다 만들어지면 DOM API를 통해서 DOM에 접근할 수 있으므로

이 시점(DOM Tree 분석완료와 렌더링 사이)에 JS를 실행시키는 것이 가장 성능이 좋음

이 시점이 DOMContentLoaded

위와 같이 DOMContentLoaded 시점에 init() 함수를 실행시켜서, 초기화에 필요한 서비스들을 작성하는게 효율적