html보다 script가 위에 있을 때 정상적으로 동작하지 않는 문제가 발생
평소에 작성하던 대로 html 위에 script를 선언해서 함수나 eventHandler를 사용하고 있었다. 하지만 함수는 사용이 되나 eventHandler가 정상적으로 동작하지 않았고 이유를 찾아보던 중 html 요소들이 로드되기 전에 실행이 될 가능성이 있기 때문이라는 것을 알게되어 이 문제를 해결하기 위한 방법을 찾아보게 되었다.
-
스크립트를 html 요소 맨 아래(body태그의 맨 아래)에 배치한다.
--> 이 방법으로는 바로 해결이 되었다.
-
DOMContentLoaded 이벤트 사용
--> 이 방법으로는 해결되지 않았다. 그래서 DOMContentLoaded와 비슷한 것을 찾아보게 되었고 window.onload라는 것이 있다는 것을 알게 되었다.
DOMContentLoaded
- 웹페이지가 로드되고 파싱된 후에 발생하는 이벤트. HTML 문서의 모든 요소가 파싱 되었지만, 이미지나 스타일시트등 외부리소스는 비동기적으로 로드해서 완전히 로드되지 않았을 때 발생한다. HTML 문서가 준비되면 바로 발생하는 이벤트이다. 즉 window.onload보다 빨리 로드되고 렌더링될 수 있다.
window.onload
- 웹페이지의 모든 자원이 로드 되어야만 발생한다. 즉, 페이지의 모든 요소가 다운로드되고 렌더링 되어야 이벤트가 발생한다. 그래서 window.onload가 실행되기까지는 상대적으로 오래 걸릴 수 있다.
결론
- 페이지 초기화에 필요한 스크립트는 DOMContentLoaded 에서 실행하고, 추가적인 작업이나 리소스를 로드해야 할 경우에는 window.onload 에서 실행한다.
