js파일은 header 파일의 <head> 단에서 늘 임포트 했었는데 그게 아니였단희 충격.
실제 프로젝트 에서도 계속 이렇게 사용해왔고 모두가 이렇게 사용해왔는데 왜??????
하단에서 임포트 하는 이유
1. 렌더링 차단 방지
JavaScript 파일이 <head>에서 임포트되면 브라우저는 스크립트를 실행하기 위해 HTML 렌더링을 일시적으로 멈춥니다.
<body> 하단에서 임포트하면 HTML이 모두 렌더링된 후 스크립트가 실행됩니다.
2. 페이지 로드 속도 향상
HTML 구조가 먼저 로드되고 화면에 표시된 뒤 JavaScript 파일이 실행되므로 사용자에게 더 빠르게 콘텐츠를 보여줄 수 있습니다.
3. DOM 접근 가능
JavaScript가 DOM 요소를 조작하려면 해당 요소가 먼저 렌더링되어 있어야 합니다.
하단에서 임포트하면 HTML 요소가 모두 로드된 상태에서 스크립트가 실행됩니다.
예외적으로 <head>에서 임포트해야 하는 경우
1. SPA (Single Page Application) 구조
- React, Angular, Vue.js 같은 프레임워크를 사용하는 경우:
이 프레임워크들은 DOM을 렌더링하는 전 과정이 JavaScript에 의존합니다.
따라서 JavaScript 파일이 HTML 구조를 만들기 전에 로드되어야 합니다.
이 경우, JavaScript를<head>에 로드해야 페이지가 제대로 작동합니다.
2. 필수 초기화 스크립트
- 애널리틱스, 광고, 서드파티 라이브러리:
Google Analytics, Facebook Pixel 같은 스크립트는 웹사이트 로드와 동시에 실행되어야 하므로 에서 불러옵니다.
이런 스크립트들은 사용자와 상호작용하기 전에 반드시 실행되어야 하는 경우가 많습니다.
3. async나 defer 속성을 사용하는 경우
: 이 속성은 JavaScript 로딩 방식에 영향을 미쳐 성능 문제를 완화합니다.1) async
- 스크립트를 비동기적으로 로드하며, 다른 스크립트와 순서 관계가 없음.<script src="/js/demo.js" async></script>2) defer
스크립트를 비동기적으로 로드하지만, HTML 렌더링이 끝난 후에 실행됩니다<script src="/js/demo.js" defer></script>실제 상황에서의 타협
- 성능을 우선시하는 경우: JavaScript는
<body>하단에 두거나 defer를 사용합니다. - 프로젝트 요구에 따라:
초기화 코드와 서드파티 스크립트는<head>에서 로드.
페이지 인터랙션에 필요한 JavaScript는 하단에서 로드.
결론
- 일반적으로는
<body>태그 하단에 JavaScript를 임포트합니다. - defer 속성을 사용하면
<head>에서 임포트하면서도 하단처럼 처리할 수 있습니다. - async는 비동기 로드가 필요할 때 적합하지만, 스크립트 순서를 고려해야 합니다.
하단 임포트 또는 defer 사용을 추천합니다! 😊
My potential is limitless!