10. html에서 자바스크립트 코드를 로딩하는 script 태그를 body 태그의 최하단에 위치시키는 이유?
HTML에서 <script> 태그를 보통 <body> 태그의 최하단에 배치하는 이유는
페이지의 로딩 성능과 사용자 경험을 최적화하기 위해서이다.
1. 렌더링 차단 방지
브라우저는 HTML을 위에서 아래로 순차적으로 파싱하며 화면을 렌더링한다.
<script> 태그는 기본적으로 동기적으로 실행되며, 브라우저는 해당 스크립트를 다운로드하고 실행하기 전까지 HTML 파싱을 중단.
만약 <script> 태그가 <head> 또는 <body> 상단에 있으면,
스크립트를 로딩하는 동안 페이지의 나머지 요소 렌더링이 지연될 수 있으므로,
<script> 태그를 페이지 최하단에 배치하여 HTML 구조가 먼저 로드되고 렌더링이 완료된 후에 JavaScript가 실행되게 하여, 사용자가 콘텐츠를 빠르게 볼 수 있다.
2. 빠른 사용자 경험
중요한 시각적 콘텐츠(HTML/CSS)가 먼저 로드되므로 사용자가 빈 화면을 보게 되는 시간을 줄일 수 있다. (JavaScript 실행이 콘텐츠 렌더링을 방해하지 않으므로 페이지가 더 빠르게 보이는 느낌)
3. 의존성 문제 방지
JavaScript는 종종 HTML 요소를 조작하기 위해 DOM(Document Object Model)을 사용한다. <script> 태그가 HTML 요소보다 먼저 로드되면, 스크립트 실행 시 해당 요소가 DOM에 아직 존재하지 않을 수 있으므로 에러가 발생한다. 스크립트를 최하단에 배치하면 DOM이 완전히 로드된 후 스크립트가 실행되므로 DOM 조작과 관련된 에러 방지 가능.
4. 기본적으로 비동기 로딩 옵션 부족
과거에는 <script> 태그가 기본적으로 동기적으로 로드되고 실행되었지만,
최근에는 async와 defer 속성이 추가되어, 스크립트를 비동기적으로 로드하거나 DOM 로드 이후 실행할 수 있게 되었다. 하지만 여전히 script 태그의 최하단 배치가 일반적.
- async : 스크립트를 비동기적으로 로드하며, 로드가 완료되는 즉시 실행. (DOM 파싱이 중단될 수 있음)
- defer : 스크립트를 비동기적으로 로드하며, HTML 파싱이 완료된 후 실행. (DOM 차단 방지)
➡️ <script> 태그를 <body> 최하단에 배치하는 전통적인 방식은 렌더링 차단을 피하고, 빠른 사용자 경험을 제공하며, DOM 의존성을 고려한 안정적인 스크립트 실행을 보장하기 위한 것. 최근에는 async와 defer 속성을 활용해 더욱 유연하게 스크립트 로딩을 제어할 수도 있다.
