HTML <script> 태그 사용법
<script> 태그는 HTML 문서에 자바스크립트를 포함하는 데 사용됩니다. 이 태그의 위치는 페이지 성능과 사용자 경험에 큰 영향을 미칠 수 있으며, 브라우저가 DOM 트리를 생성하는 단계와 밀접하게 관련이 있습니다. 이 글에서는 <script> 태그의 위치가 중요한 이유와 다양한 배치 방법에 대해 자세히 설명하겠습니다.
브라우저의 DOM 트리 생성 단계
브라우저는 HTML 문서를 위에서 아래로 순차적으로 읽고 파싱하여 DOM(Document Object Model) 트리를 생성합니다. 이 과정은 다음과 같은 단계로 이루어집니다:
-
HTML 파싱:
- 브라우저는 HTML 문서를 읽고, 태그를 분석하여 DOM 트리를 만듭니다.
-
CSS 파싱:
- CSS 파일을 읽고, CSSOM(CSS Object Model) 트리를 생성합니다.
-
DOM 트리와 CSSOM 트리 결합:
- DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성합니다.
-
렌더링:
- 렌더 트리를 사용하여 웹 페이지를 화면에 그립니다.
<script> 태그의 위치가 중요한 이유
브라우저가 HTML 문서를 파싱하는 도중에 <script> 태그를 만나면, 자바스크립트 파일을 다운로드하고 실행합니다. 이 과정에서 HTML 파싱이 일시 중단되기 때문에, <script> 태그의 위치는 페이지 로드 속도와 사용자 경험에 직접적인 영향을 미칩니다.
<script> 태그의 위치
1. <head> 태그 내에 배치
<head> 태그 내에 <script> 태그를 배치하면, 브라우저는 HTML 문서를 파싱하는 도중에 자바스크립트를 로드하고 실행합니다.
-
장점:
- 초기화가 필요한 스크립트나, CSS를 사용하여 페이지가 로드되기 전에 스타일이 적용되어야 하는 경우 유용합니다.
- 예를 들어, 페이지 초기 로드 시 특정 기능을 초기화하거나, 페이지 스타일링을 조정해야 할 때 사용됩니다.
-
단점:
- 페이지 로딩 속도가 지연될 수 있습니다. 브라우저는
<script>태그를 만나면 자바스크립트를 다운로드하고 실행한 후에야 나머지 HTML을 파싱합니다. - 이로 인해 사용자에게 콘텐츠가 늦게 표시될 수 있습니다.
- 페이지 로딩 속도가 지연될 수 있습니다. 브라우저는
예시:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script> <!-- 스크립트가 헤더에 위치 -->
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 예시 문서입니다.</p>
</body>
</html>2. <body> 태그의 끝 부분에 배치
<body> 태그의 끝 부분에 <script> 태그를 배치하는 것은 일반적으로 권장되는 방법입니다. 이 방법은 페이지 콘텐츠가 먼저 로드된 후 자바스크립트가 로드되고 실행되도록 합니다.
-
장점:
- 사용자에게 페이지 콘텐츠가 더 빠르게 표시됩니다. 자바스크립트가 로드되기 전에 HTML과 CSS가 먼저 로드되고 렌더링됩니다.
- 이는 사용자 경험을 향상시킵니다.
-
단점:
- 초기화가 필요한 스크립트나, 페이지 로드 이전에 실행되어야 하는 스크립트에는 적합하지 않습니다.
- 이러한 경우, 스크립트를
<head>에 배치하거나,defer속성을 사용하여 해결할 수 있습니다.
예시:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 예시 문서입니다.</p>
<script src="script.js"></script> <!-- 스크립트가 바디 끝 부분에 위치 -->
</body>
</html><script> 태그의 속성
-
async: 스크립트가 백그라운드에서 다운로드되면서 HTML 파싱도 동시에 진행됩니다. 다운로드가 완료되면 스크립트를 실행합니다.- 이 속성은 독립적으로 실행되어야 하는 스크립트에 적합합니다.
<script src="script.js" async></script> -
defer: 스크립트가 백그라운드에서 다운로드되면서 HTML 파싱도 동시에 진행되지만, HTML 파싱이 끝난 후 스크립트를 실행합니다.- 이 속성은 HTML 파싱이 완료된 후 실행되어야 하는 스크립트에 적합합니다.
<script src="script.js" defer></script>
결론
<script> 태그는 페이지 로드 속도와 사용자 경험을 최적화하기 위해 <body> 태그의 끝 부분에 배치하는 것이 일반적으로 권장됩니다. 이는 브라우저가 DOM 트리를 생성하는 동안 자바스크립트 실행으로 인한 지연을 최소화하여 사용자에게 콘텐츠를 더 빨리 표시할 수 있게 합니다. 초기화가 필요한 스크립트나, CSS를 사용하는 스크립트는 <head> 태그 내에 배치할 수 있으며, async나 defer 속성을 사용하여 스크립트 로드를 최적화할 수도 있습니다. 이러한 원칙을 따르면 웹 페이지의 성능과 사용자 경험을 최적화할 수 있습니다.
웹 페이지를 작성할 때는 각 스크립트의 용도와 필요한 로딩 시점을 고려하여 적절한 위치에 배치하는 것이 중요합니다.
