더 나은 웹 개발을 위해 HTML에서 <script> 태그를 사용하는 효과적인 방법-JS 튜토리얼-php.cn

집 > 웹 프론트엔드 > JS 튜토리얼 > 더 나은 웹 개발을 위해 HTML에서

ffective Ways to Use the <script> 더 나은 웹 개발을 위해 HTML에 태그 추가

HTML 문서 내의 <script> 태그 배치는 HTML 콘텐츠 렌더링과 관련된 JavaScript 실행 타이밍에 큰 영향을 미칩니다. 이 가이드에서는 실행 프로세스와 최적의 사용 사례를 자세히 설명하는 네 가지 주요 접근 방식을 살펴봅니다.

1. <script> <head>

내의 태그

<code class="language-html"><head>
  <script>
    // JavaScript code here
  </script>
  <title>Script in Head</title>
</head>
<h1>Hello, World!</h1></code>

로그인 후 복사

실행과정:

브라우저는 HTML 문서를 위에서 아래로 구문 분석합니다.
<script>에서 <head> 태그가 발견되면 스크립트가 다운로드 및 실행되는 동안 HTML 렌더링이 일시 중지됩니다.
스크립트 실행 후 브라우저는 HTML 처리를 재개합니다.

단점:

스크립트가 크거나 로딩 속도가 느리면 페이지 렌더링이 지연되어 빈 화면이 나타날 수 있습니다.
이 스크립트 내에서 DOM 요소를 조작하려는 시도는 요소가 아직 로드되지 않았기 때문에 실패할 수 있습니다.

이상적인 사용 사례:

분석이나 구성 코드 등 즉시 필요하지 않은 기능이 포함된 스크립트

2. <script> <body>

끝에 태그 추가

<code class="language-html"><title>Script at Bottom</title>
<h1>Hello, World!</h1>
<script>
  // JavaScript code here
</script></code>

로그인 후 복사

실행과정:

브라우저가 전체 HTML 콘텐츠를 로드하고 렌더링합니다.
<script> 끝에 있는 <body> 태그는 페이지 렌더링 후 처리되어 실행됩니다.

장점:

스크립트 실행 전에 완전한 HTML 로딩을 보장합니다.
렌더링 지연을 방지하여 사용자 경험을 개선합니다.
DOM 요소는 쉽게 조작할 수 있습니다.

단점:

전체 HTML 렌더링 후 JavaScript 실행이 발생하므로 페이지 로드 시간이 약간 증가했습니다.

이상적인 사용 사례:

페이지 콘텐츠와 상호작용하는 스크립트(예: 이벤트 리스너, 요소 수정)

3. <script> async 속성

으로 태그 지정

<code class="language-html"><head>
  <script async src="script.js"></script>
  <title>Script with Async</title>
</head>
<h1>Hello, World!</h1></code>

로그인 후 복사

실행과정:

브라우저는 HTML을 순차적으로 로드합니다.
async 스크립트를 발견하면 HTML 로딩을 계속하면서 동시에 스크립트를 다운로드합니다.
다운로드되면 스크립트가 즉시 실행되어 렌더링을 잠시 일시 중지한 다음 HTML 로딩을 다시 시작합니다.

장점:

비차단: 페이지 렌더링을 지연시키지 않고 백그라운드에서 스크립트 로딩이 발생합니다.
병렬 다운로드로 인해 페이지 로드 속도가 빨라졌습니다.

단점:

async 스크립트가 여러 개 있으면 스크립트가 예측할 수 없는 순서로 실행될 수 있습니다.
HTML 구조에 의존하는 스크립트는 조기에 실행되어 오류가 발생할 수 있습니다.

이상적인 사용 사례:

다른 스크립트나 HTML 요소에 종속되지 않는 분석, 광고 또는 소셜 미디어 위젯과 같은 독립적인 스크립트.

4. <script> defer 속성

으로 태그 지정

<code class="language-html"><head>
  <script>
    // JavaScript code here
  </script>
  <title>Script in Head</title>
</head>
<h1>Hello, World!</h1></code>

로그인 후 복사

실행과정:

브라우저는 HTML을 순차적으로 로드합니다.
defer 스크립트는 HTML과 동시에 다운로드되지만 전체 HTML이 구문 분석된 후에만 실행됩니다.
실행은 DOMContentLoaded 이벤트 직전에 발생합니다.

장점:

페이지 로딩이 완료된 후 스크립트 실행을 보장합니다.
defer 스크립트를 여러 개 사용하는 경우 스크립트 실행 순서를 유지합니다.
완전히 사용 가능한 DOM에 의존하는 스크립트에 적합합니다.

이상적인 사용 사례:

DOM이 완전히 로드된 후 DOM을 조작하는 스크립트.

비교표

방법 실행 시간 렌더링 차단 최고의 사용 사례

Method	Execution Time	Blocks Rendering	Best Use Case
`<script>` in `<head>`	Before HTML load	Yes	Configuration, early execution logic
`<script>` at end of `<body>`	After HTML load	No	DOM manipulation, event handling
`<script async>`	When script is downloaded	No (except during execution)	Analytics, ads, independent scripts
`<script defer>`	After HTML parse	No	DOM-dependent scripts