HTML 마크업에서 최적의 스크립트 태그 배치 소개 JavaScript를 HTML 문서에 통합할 때 태그는 오랫동안 논쟁의 대상이었습니다. 이 도움말에서는 태그 배치에 대한 모범 사례를 살펴보고 <head> 및 <body> 섹션.</p> <h3>역사적인 오해</h3> <p>과거에는 <script> <head> 부분. 그러나 이 권장 사항은 오래되었으며 스크립트가 구문 분석되는 동안 페이지 렌더링을 차단할 가능성이 있기 때문에 발생했습니다.</p> <p>반대로 <script> <body> 시작 부분에 있는 태그 섹션도 바람직하지 않은 것으로 간주되었습니다. 이는 페이지를 완전히 렌더링하기 전에 브라우저가 JavaScript를 구문 분석해야 하여 성능 문제가 발생할 수 있기 때문입니다.</p> <h3>최신 모범 사례</h3> <p>현재 <script> 태그는 <head> 부분. 이를 통해 브라우저는 문서의 나머지 부분에 대한 구문 분석을 차단하지 않고 즉시 스크립트 다운로드를 시작할 수 있습니다.</p> <p>스크립트 구문 분석과 관련된 차단 동작을 방지하기 위해 브라우저는 이제 비동기 및 지연 속성을 지원합니다.</p> <h3> 비동기 및 연기 속성 사용</h3> <p><strong>비동기:</strong> 비동기를 사용하는 스크립트 속성은 비동기적으로 실행됩니다. 즉, 스크립트가 다운로드되고 실행되는 동안 브라우저가 문서를 계속 구문 분석할 수 있습니다.</p> <p><strong>Defer:</strong> defer 속성이 있는 스크립트는 문서에 나타나는 순서대로 실행되지만 전체 문서가 구문 분석된 후에만.</p> <p><strong>모듈:</strong> type="module"인 JavaScript 모듈 비동기적으로 로드되며 지연된 스크립트처럼 처리됩니다.</p> <h3>결론</h3> <p>비동기, 지연 또는 모듈 속성을 활용하고 <script> <head> 섹션에서 웹사이트 개발자는 페이지 로딩 속도를 최적화하고 사용자 경험을 향상할 수 있습니다.</p> <h3>참조</h3> <ul> <li>[비동기 및 지연 속성](https://www.html5rocks.com/en/tutorials /speed/script-loading/)</li> <li>[defer 및 async](https://developers.google.com/web/fundamentals/performance/tical-rendering-path/defer-loading-javascript)</li> <li>[렌더링 차단 JavaScript 제거](https://www .w3.org/TR/html5/scripting-1.html#remove-render-blocking-javascript)</li> <li>[비동기, 지연, 모듈: 시각적 치트시트](https://addyosmani.com/blog/async-defer-modules-explained/#~a-visual-explanation)</li> <li>[<script>: 유형 속성] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)</li> </ul>
