<html> 안에서 <script>의 위치는 중요하다. 그 이유는 <script>의 위치에 따라서 화면에 스크립트가 적용되지 않는 경우가 생기기 때문이다.
1. head 태그 안에 script 태그가 있는 경우
<head>
<script>
console.log(document.getElementById("title")); // null 반환 (HTML 아직 로드 전)
</script>
</head>
<body>
<h1 id="title">안녕하세요</h1>
</body>- ✅ HTML을 읽기 전에 스크립트가 실행됨
- ✅ 보통 선언적 스크립트(전역 변수, 함수 정의)에 사용
- ❌ DOM 요소가 아직 로드되지 않음 → document.getElementById() 같은 DOM 조작 불가능
- html은 위에서부터 순차적으로 파싱이 된다.
- html 파싱 중 script를 만나면, 파싱을 중단하고 script를 다운 및 실행한다.
- 파싱이 끝나지 않은 상태에서 Script가 실행되기 때문에 Script가 제대로 실행되지 않게 된다. 정확하게는 DOM 요소를 사용하는 경우 제대로 실행되지 않게 된다.
2. body 내부에 위치한 경우
(1) body 시작 부분
<body>
<script>
console.log(document.getElementById("title")); // null 반환 (아직 로드 안됨)
</script>
<h1 id="title">안녕하세요</h1>
</body>- ✅ HTML 문서가 로드되는 초기에 실행
- ❌ 여전히 DOM이 완전히 로드되지 않는다.
(2) body 끝 부분 (</body> 앞)
<body>
<h1>안녕하세요</h1>
<script>
console.log("이 스크립트는 body 끝 부분에서 실행됩니다.");
</script>
</body>- ✅ DOM이 모두 로드된 후 실행됨 → document.getElementById() 같은 DOM 조작 가능
- ✅ 일반적으로 성능상 가장 추천되는 위치
3. async vs defer 속성
<script async src="script.js"></script> // 비동기 실행 (다운로드 완료 즉시 실행)
<script defer src="script.js"></script> // HTML 파싱 후 실행- async: HTML 파싱과 동시에 다운로드, 다운로드 완료 즉시 실행 (순서 보장 X)
- defer: HTML 파싱과 동시에 다운로드, HTML 파싱 완료 후 실행 (순서 보장 O)
4. 정리
| 위치 | 특징 | 추천 여부 |
| <head> 내부 | HTML 파싱 전 실행 → DOM 조작 불가 | ❌ (단, defer 사용 시 가능) |
| <body> 시작 부분 | 일부 DOM이 로드된 상태에서 실행될 수도 있음 | ❌ |
| <body> 끝 부분 | 모든 DOM이 로드된 후 실행 | ✅ 추천 |
| <script defer> | HTML 파싱 후 실행 (순서 보장) | ✅ 추천 |
| <script async> | 다운로드 즉시 실행 (순서 보장 X) | ⚠️ 주의 |
가장 추천되는 방식은 <body> 끝 부분에 <script>를 배치하거나 defer 속성을 사용하는 것이다.
'웹 기초' 카테고리의 다른 글
| [Vanila JavaScript] 파티클 만들기 (0) | 2025.04.09 |
|---|---|
| [FireBase] FireBase CORS 오류 및 해결 방법 (0) | 2025.04.08 |
| [내일 배움 캠프, 웹 기초] URL이란? (0) | 2025.03.31 |
| [내일 배움 캠프, 웹 기초] index.html이란? (0) | 2025.03.28 |
| [내일 배움 캠프, 웹 기초] 웹 브라우저 작동 원리 (0) | 2025.03.28 |
