HTML 문서 내의 </code> 태그 배치는 HTML 콘텐츠 렌더링과 관련된 JavaScript 실행 타이밍에 큰 영향을 미칩니다. 이 가이드에서는 실행 프로세스와 최적의 사용 사례를 자세히 설명하는 네 가지 주요 접근 방식을 살펴봅니다.</p> <p><strong>1. <code><script></code> <code><head></code></strong></p> 내의 태그 <pre><code class="language-html"><head> <script> // JavaScript code here Script in Head Hello, World! 실행과정: 브라우저는 HTML 문서를 위에서 아래로 구문 분석합니다. </code>에서 <code><head></code> 태그가 발견되면 스크립트가 다운로드 및 실행되는 동안 HTML 렌더링이 일시 중지됩니다.</li> <li>스크립트 실행 후 브라우저는 HTML 처리를 재개합니다.</li> </ol> <p><strong>단점:</strong></p> <ul> <li>스크립트가 크거나 로딩 속도가 느리면 페이지 렌더링이 지연되어 빈 화면이 나타날 수 있습니다.</li> <li>이 스크립트 내에서 DOM 요소를 조작하려는 시도는 요소가 아직 로드되지 않았기 때문에 실패할 수 있습니다.</li> </ul> <p><strong>이상적인 사용 사례:</strong></p> <ul> <li>분석이나 구성 코드 등 즉시 필요하지 않은 기능이 포함된 스크립트</li> </ul> <p><strong>2. <code><script></code> <code><body></code></strong></p> 끝에 태그 추가 <pre><code class="language-html"><title>Script at Bottom</title> <h1>Hello, World!</h1> <script> // JavaScript code here 실행과정: 브라우저가 전체 HTML 콘텐츠를 로드하고 렌더링합니다. </code> 끝에 있는 <code><body></code> 태그는 페이지 렌더링 후 처리되어 실행됩니다.</li> </ol> <p><strong>장점:</strong></p> <ul> <li>스크립트 실행 전에 완전한 HTML 로딩을 보장합니다.</li> <li>렌더링 지연을 방지하여 사용자 경험을 개선합니다.</li> <li>DOM 요소는 쉽게 조작할 수 있습니다.</li> </ul> <p><strong>단점:</strong></p> <ul> <li>전체 HTML 렌더링 후 JavaScript 실행이 발생하므로 페이지 로드 시간이 약간 증가했습니다.</li> </ul> <p><strong>이상적인 사용 사례:</strong></p> <ul> <li>페이지 콘텐츠와 상호작용하는 스크립트(예: 이벤트 리스너, 요소 수정)</li> </ul> <p><strong>3. <code><script></code> <code>async</code> 속성</strong></p>으로 태그 지정 <pre><code class="language-html"><head> <script async src="script.js"> Script with Async Hello, World! 실행과정: 브라우저는 HTML을 순차적으로 로드합니다. async 스크립트를 발견하면 HTML 로딩을 계속하면서 동시에 스크립트를 다운로드합니다. 다운로드되면 스크립트가 즉시 실행되어 렌더링을 잠시 일시 중지한 다음 HTML 로딩을 다시 시작합니다. 장점: 비차단: 페이지 렌더링을 지연시키지 않고 백그라운드에서 스크립트 로딩이 발생합니다. 병렬 다운로드로 인해 페이지 로드 속도가 빨라졌습니다. 단점: async 스크립트가 여러 개 있으면 스크립트가 예측할 수 없는 순서로 실행될 수 있습니다. HTML 구조에 의존하는 스크립트는 조기에 실행되어 오류가 발생할 수 있습니다. 이상적인 사용 사례: 다른 스크립트나 HTML 요소에 종속되지 않는 분석, 광고 또는 소셜 미디어 위젯과 같은 독립적인 스크립트. 4. </code> <code>defer</code> 속성</strong></p>으로 태그 지정 <pre><code class="language-html"><head> <script> // JavaScript code here Script in Head Hello, World! 실행과정: 브라우저는 HTML을 순차적으로 로드합니다. defer 스크립트는 HTML과 동시에 다운로드되지만 전체 HTML이 구문 분석된 후에만 실행됩니다. 실행은 DOMContentLoaded 이벤트 직전에 발생합니다. 장점: 페이지 로딩이 완료된 후 스크립트 실행을 보장합니다. defer 스크립트를 여러 개 사용하는 경우 스크립트 실행 순서를 유지합니다. 완전히 사용 가능한 DOM에 의존하는 스크립트에 적합합니다. 이상적인 사용 사례: DOM이 완전히 로드된 후 DOM을 조작하는 스크립트. 비교표 방법 실행 시간 렌더링 차단 최고의 사용 사례 Method Execution Time Blocks Rendering Best Use Case </code> in <code><head></code> </td> <td>Before HTML load</td> <td>Yes</td> <td>Configuration, early execution logic</td> </tr> <tr> <td> <code><script></code> at end of <code><body></code> </td> <td>After HTML load</td> <td>No</td> <td>DOM manipulation, event handling</td> </tr> <tr> <td><code><script async></code></td> <td>When script is downloaded</td> <td>No (except during execution)</td> <td>Analytics, ads, independent scripts</td> </tr> <tr> <td><code><script defer></code></td> <td>After HTML parse</td> <td>No</td> <td>DOM-dependent scripts</td> </tr> </tbody> </table>의 <td><p> </p></td> <td>HTML 로드 전</td> <td>예</td> <td>구성, 초기 실행 로직</td> </tr> <tr> <td><strong></strong></td> 끝 <td>HTML 로드 후</td> <td>아니요</td> <td>DOM 조작, 이벤트 처리</td> </tr> <tr> <td></td> <td>스크립트 다운로드 시</td> <td>아니요(실행 중 제외)</td> <td>분석, 광고, 독립 스크립트</td> </tr> <tr> <td><code><스크립트 연기></code></td> <td>HTML 구문 분석 후</td> <td>아니요</td> <td>DOM 종속 스크립트</td> </tr> <ul> <li>결론: 모범 사례<code><script></code><code><body></code> </li> <li>페이지 콘텐츠와 상호작용하고 완전히 로드된 DOM이 필요한 스크립트의 경우 <code><script async></code> 끝에 </li>을 사용하세요.<li> <code><body></code>분석 및 광고와 같은 독립적인 스크립트에는 </li>을 사용하세요.<li> <code><head></code>부드러운 페이지 로딩을 위해 속성을 사용하지 않는 경우 <code>async</code> 하단에 스크립트를 배치하세요.<code>defer</code> </li>렌더링 방해를 방지하기 위해 꼭 필요한 경우가 아니면 </ul> 또는 <p> 없이 <code><script></code>에 스크립트를 배치하지 마세요.</p> 태그 사용법을 익히는 것은 웹 애플리케이션을 최적화하는 데 중요합니다. 인라인, 내부, 외부, 비동기 또는 지연 스크립트 중에서 선택하면 성능이 향상되고 코드 유지 관리가 향상되며 뛰어난 사용자 경험이 가능합니다.
