HTML 마크업에서 스크립트 요소의 최적 배치 JavaScript를 HTML 문서에 통합할 때 태그 및 관련 스크립트는 논쟁의 주제였습니다. <head> 섹션은 권장되지 않습니다. <body> 섹션에도 문제가 있습니다.</p> <p><strong>기존 접근 방식의 문제점</strong></p> <p>이전 권장 사항에서는 <script> <body> 하단에 있는 태그 섹션, 이것이 끝까지 파서를 차단하는 것을 방지한다고 가정합니다. 그러나 이 접근 방식은 다른 문제를 야기합니다. 즉, 전체 문서가 구문 분석될 때까지 브라우저가 스크립트 다운로드를 시작할 수 없습니다. 방대한 스크립트와 스타일시트가 있는 대규모 웹사이트에서 이러한 지연은 성능에 큰 영향을 미칩니다.</p> <p><strong>최신 솔루션: 비동기 및 연기 속성</strong></p> <p>현재 브라우저는 비동기 및 연기 속성을 제공합니다. 스크립트에. 이러한 속성은 스크립트가 다운로드되는 동안 구문 분석을 진행하도록 브라우저에 지시합니다.</p> <ul> <li> <strong>async:</strong> 비동기 속성이 있는 스크립트는 브라우저를 차단하지 않고 다운로드하자마자 실행됩니다. 이 시나리오에서는 스크립트가 순서 없이 실행될 수 있습니다.</li> <li> <strong>defer:</strong> defer 속성이 있는 스크립트는 나타나는 순서대로 실행되지만 전체 문서가 로드된 후에만 실행됩니다. 이렇게 하면 브라우저를 차단하지 않고 스크립트가 올바른 순서로 실행됩니다.</li> </ul> <p><strong>모듈</strong></p> <p>type="module"을 포함하는 스크립트는 JavaScript 모듈로 처리되며 지연된 것처럼 로드됨 scripts.</p> <p><strong>결론</strong></p> <p>최적의 스크립트 배치에 대한 현대적인 접근 방식은 <head> 섹션을 살펴보고 async 또는 defer 속성을 사용하세요. 이를 통해 브라우저를 방해하지 않고 스크립트를 즉시 다운로드할 수 있으며 이러한 속성을 지원하지 않는 이전 브라우저와의 호환성을 유지할 수 있습니다. 이 접근 방식을 구현하면 모든 브라우저에서 기능을 유지하면서 웹사이트의 로딩 시간이 향상되는 이점을 얻을 수 있습니다.</p>
