JavaScript는 <head> 태그 안이든 <body> 태그 안이든 페이지 어디에나 배치할 수 있습니다. 하지만 웹 개발에서 가장 권장되는 모범 사례는 JavaScript 코드를 바닥글, 즉 </body> 닫는 태그 바로 앞에 두는 것입니다.
바닥글에 JavaScript를 배치하는 이유
브라우저는 HTML 문서를 위에서부터 아래로 순차적으로 해석하면서 렌더링합니다. 만약 <head> 안에 무거운 스크립트가 있다면, 브라우저는 해당 스크립트의 다운로드와 실행이 끝날 때까지 페이지의 나머지 부분을 처리하지 못합니다. 반면 스크립트를 문서 마지막에 두면 다음과 같은 장점이 있습니다.
- DOM 콘텐츠 로딩 차단 방지 – 스크립트 실행 전에 HTML 요소들이 먼저 파싱되므로, 사용자가 빈 화면을 오래 보지 않습니다.
- 빠른 초기 표시 속도 – 텍스트와 이미지 등 주요 콘텐츠가 먼저 렌더링되어 체감 속도가 크게 향상됩니다.
- 전체적인 페이지 로딩 시간 단축 – 스크립트 로딩이 병목 지점이 되지 않아 페이지가 더 빠르게 완성됩니다.
- 안정적인 DOM 접근 – 스크립트가 실행될 시점에는 대부분의 DOM 요소가 이미 생성되어 있어, 요소를 선택하거나 조작할 때 오류가 줄어듭니다.
참고: defer 속성 활용하기
최신 방식으로는 <script src="..." defer>처럼 defer 속성을 사용하는 방법도 있습니다. defer가 붙은 외부 스크립트는 HTML 파싱을 막지 않으면서 문서 해석이 끝난 후 순서대로 실행되므로, head 영역에 두어도 바닥글에 배치한 것과 비슷한 효과를 얻을 수 있습니다.
결론
요약하자면, JavaScript를 바닥글에 배치하면 스크립트가 DOM 콘텐츠 로딩을 차단하지 않고, 웹 페이지가 JavaScript보다 먼저 로드되며, 결과적으로 표시 속도와 전체 페이지 로딩 속도가 모두 향상됩니다. 특별한 사유가 없다면 스크립트는 항상 </body> 직전에 두거나 defer 속성을 함께 사용하는 것이 좋은 습관입니다.