HTML 문서에서 자바스크립트 파일을 임포트하는 위치는 성능과 사용자 경험에 영향을 미칠 수 있습니다.
자바스크립트를 어디에 삽입하느냐에 따라 페이지 로딩 시간, 초기화 속도, 그리고 페이지 렌더링에 차이가 발생합니다.
주요 위치와 각각의 장단점을 살펴보겠습니다.
1. <head> 태그 내부
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="script.js"></script>
</head>
<body>
<!-- HTML content -->
</body>
</html>
- 장점
- 자바스크립트의 조기 실행: 자바스크립트가 페이지 로딩 초기에 실행되어야 할 때 유용합니다. 예를 들어, 초기 설정이나 중요한 데이터 로드가 필요할 때 사용할 수 있습니다.
- 단점
- 렌더링 차단: 자바스크립트 파일이 로드되고 실행될 때까지 HTML 파싱이 중단됩니다. 이는 페이지의 초기 렌더링 속도를 느리게 만듭니다.
2. <body> 태그 끝에 위치
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- HTML content -->
<script src="script.js"></script>
</body>
</html>
- 장점
- 렌더링 최적화: HTML 파싱과 렌더링이 완료된 후에 자바스크립트를 로드하므로, 사용자에게 페이지의 콘텐츠가 더 빨리 보입니다. 초기 렌더링 성능이 향상됩니다.
- 단점
- 조기 실행 불가능: 초기 설정이 필요하거나 HTML 요소가 로드되기 전에 자바스크립트가 실행되어야 하는 경우에 적합하지 않습니다.
3. <head> 태그 내부에서 defer 또는 async 속성을 사용
3-1. defer 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="script.js" defer></script>
</head>
<body>
<!-- HTML content -->
</body>
</html>
- 장점
- `defer` 속성은 자바스크립트를 비동기적으로 로드하면서, HTML 파싱이 완료된 후에 실행합니다. 따라서 렌더링 차단을 방지하면서도 모든 DOM이 준비된 후에 스크립트가 실행됩니다.
- 단점
- 자바스크립트가 모든 HTML을 파싱한 후에 실행되므로, 조기 실행이 필요한 경우에는 적합하지 않습니다.
3-2. async 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="script.js" async></script>
</head>
<body>
<!-- HTML content -->
</body>
</html>
- 장점
- `async` 속성은 자바스크립트를 비동기적으로 로드하고, 다운로드가 완료되는 즉시 실행합니다. 다른 스크립트나 HTML 파싱과 병렬로 실행되므로, 페이지 로딩 속도가 빨라집니다.
- 단점
- 스크립트의 실행 순서가 보장되지 않으므로, 순서에 의존하는 스크립트에는 적합하지 않습니다.
4. 결론
- 일반적으로 `<body>` 태그 끝에 자바스크립트를 삽입하거나 `<head>` 태그 내부에 `defer` 속성을 사용하는 것이 좋습니다. 이는 초기 페이지 렌더링을 방해하지 않으면서 자바스크립트를 비동기적으로 로드할 수 있기 때문입니다.
- 특정 시점에 자바스크립트를 실행해야 하는 경우, `async` 또는 `<head>` 태그에 직접 삽입을 고려할 수 있습니다.
* 자바스크립트를 `<head>`나 `<body>` 태그 외부에 선언
이는 HTML 표준을 위반하며, 예상치 못한 동작을 초래할 수 있습니다.
자바스크립트를 `<head>` 또는 `<body>` 태그 내에 위치시켜야 일관된 동작을 보장하고 크로스 브라우징 이슈를 최소화할 수 있습니다.
'Frontend > html' 카테고리의 다른 글
| [HTML5] 드래그 앤 드롭(Drag and Drop) - 리스트 순서 변경 (0) | 2023.09.05 |
|---|---|
| 기본 contextmenu 안뜨게 / oncontextmenu (0) | 2021.11.13 |
| html radio버튼 (0) | 2021.11.13 |