외부 script의 장점
- HTML 코드와 분리된다. → 유지보수가 쉬워진다.
- 자바스크립트 파일이 캐쉬되고 나면 페이지 로드가 빨라진다.
script가 head에 위치할 경우
-
DOM 객체가 생성되기 전에 실행된다.
→ DOM객체에 접근이 필요한 스크립트의 경우, window.onload() 와 같은 로드 이벤트 사용해야한다.
-
스크립트가 너무 무거울 경우, DOM 생성이 늦어져 화면이 늦게 출력된다.
→ 문서 초기화를 위한 가벼운 스크립트를 주로 head에서 호출한다.
script가 body에 위치할 경우
-
렌더링이 완료된 이후 스크립트가 실행된다.
→ 스크립트가 컨텐츠를 변화시킬 경우, 화면에 노출된 채로 변경된다.
-
DOM 생성이 완료되었기 때문에, 로드 이벤트와 같은 설정이 필요없다.
-
body는 위에서 아래로 읽기 때문에, 화면을 최대한 빠르게 띄우는 것이 목적이라면 script는 body 최하단에 두는 것이 좋다.
