비동기 및 지연 속성으로 스크립트 실행 최적화 HTML5 브라우저에서 비동기 및 지연 속성은 다음과 같이 웹사이트 로딩 속도를 향상시키는 효율적인 방법을 제공합니다. 실행 조정 태그. 이러한 속성은 닫는 </body> 앞에 스크립트를 배치하는 기존 접근 방식에 비해 스크립트 처리를 향상시킵니다. tag.</p> <p><strong>async vs defer: 차이점 이해</strong></p> <p>두 속성 모두 페이지 콘텐츠와 동시에 스크립트를 다운로드하는 것을 목표로 하지만 실행 시점이 다릅니다.</p> <ul> <li> <strong>async:</strong> 비동기 스크립트는 다운로드 후 즉시 로드됩니다. 비동기식으로 실행되며 잠재적으로 순서가 잘못되었습니다. 이 접근 방식은 다른 스크립트나 DOM 요소에 의존하지 않는 스크립트에 적합합니다.</li> <li> <strong>defer:</strong> defer가 있는 스크립트도 동시에 로드되지만 페이지 로드가 완료된 후에만 실행됩니다. 이 속성은 스크립트가 HTML 코드에 나타날 때 실행 순서를 보장하므로 페이지 요소나 다른 스크립트에 의존하는 스크립트에 적합합니다.</li> </ul> <p><strong>사이트 로드 속도에 미치는 영향</strong> </p> <p>페이지 하단에 스크립트에 비동기 또는 연기를 추가하면 나머지 콘텐츠와 동시에 스크립트를 다운로드하여 로드 속도를 향상시킬 수 있습니다. 이러한 속성이 있는 스크립트를 페이지 상단(<head> 내)에 배치하면 로드 속도가 빨라져 스크립트를 더 빨리 가져와 더 빠르게 실행할 수 있습니다.</p> <p><strong>호환성 고려 사항</strong></p> <p> HTML5 브라우저에서는 비동기 및 지연이 지원되지만 HTML4 브라우저에서는 문제가 발생할 수 있습니다. HTML5 채택이 더욱 널리 보급됨에 따라 이러한 속성을 채택하는 것이 좋습니다.</p> <p><strong><script defer src=...> vs. <script async src=...></strong></p> <p><head> 내에서 스크립트 로드 중 defer 속성을 사용하면 </body> 앞에 배치하는 것과 동일한 효과가 있어 지정된 순서로 실행이 보장됩니다.</p> <p>비동기의 경우 여러 스크립트가 동시에 다운로드되지만 실행 순서는 보장되지 않습니다. 서로 의존하는 스크립트의 경우 오류가 발생할 수 있습니다.</p> <p><strong>결론</strong></p> <p>HTML5 브라우저에서 최적의 성능을 얻으려면 독립적인 스크립트에 비동기 사용을 고려하고 순차적 실행이 필요한 스크립트. 이러한 기술을 채택하면 웹사이트 로딩 속도를 높이고 사용자 경험을 향상시킬 수 있습니다.</p>