웹 개발의 세계에서는 페이지 로드 시간을 최적화하는 것이 중요합니다. 의 두 가지 강력한 속성 태그(비동기 및 지연)는 웹사이트 성능에 큰 영향을 미칠 수 있습니다. 이러한 속성을 철저히 이해하지 않고 사용하면 성능에 영향을 미치고 버그가 발생할 수 있습니다. 기본부터 시작하여 이러한 속성의 기능과 사용 시기를 알아보세요.</p> <h2> 기본 사항: 스크립트 로드 방법 </h2> <p>기본적으로 브라우저에서 <script> 태그, 그것:</p> <ol> <li>HTML 분석 일시중지</li> <li>스크립트 다운로드</li> <li>스크립트 실행</li> <li>HTML 구문 분석 재개</li> </ol> <p>이 프로세스는 특히 대규모 스크립트 또는 느린 연결의 경우 페이지 렌더링 속도를 저하시킬 수 있습니다. 또한 특정 HTML 요소가 완전히 로드되기 전에 스크립트가 실행되면 버그가 발생할 수 있으며, 이는 스크립트가 문서에 올바르게 배치되지 않은 경우에 자주 발생합니다.</p> <h2> 비동기 및 연기: 양날의 검 </h2> <h3> 비동기 </h3> <pre><script async src="script.js"> 기능: HTML 구문 분석이 계속되는 동안 스크립트를 비동기적으로 다운로드합니다. 실행 시: 다운로드가 완료되자마자 HTML 구문 분석을 일시 중지합니다. 사용하는 경우: 다른 스크립트나 DOM 콘텐츠에 의존하지 않는 독립적인 스크립트 주의 사항: 순서 없이 실행되어 종속성이 깨질 수 있습니다. 연기하다 기능: HTML 구문 분석이 계속되는 동안 스크립트를 다운로드합니다. 실행 시기: HTML 구문 분석이 완료된 후 DOMContentLoaded 이벤트 전 사용되는 경우: DOM 콘텐츠에 의존하거나 특정 순서로 실행해야 하는 스크립트. 주의사항: 중요한 기능의 실행이 지연될 수 있습니다. 행동 비교 Attribute Download Execution HTML Parsing Main Risk None Blocks Immediate Paused Slow Initial Render Async Parallel ASAP Paused when downloaded Race Conditions Defer Parallel After HTML Continues Delayed Functionality 실행 순서: 비동기, 지연 및 둘 다 종속성을 관리하고 적절한 기능을 보장하려면 속성이 다른 스크립트의 실행 순서를 이해하는 것이 중요합니다. 작동 방식은 다음과 같습니다. 일반 스크립트(비동기 또는 지연 없음): 문서에 나오는 순서대로 실행하세요. 다운로드 및 실행이 완료될 때까지 HTML 구문 분석을 차단합니다. 비동기 스크립트: 동시에 다운로드하여 사용 가능한 즉시 실행하세요. 실행 순서는 보장되지 않습니다. 다운로드하자마자 실행됩니다. DOM이 완전히 로드되기 전에 실행될 수 있습니다. 스크립트 연기: 병렬로 다운로드하되 HTML 구문 분석이 완료된 후에만 실행하세요. 문서에 나오는 순서대로 실행하세요. DOMContentLoaded 이벤트 전에 실행하세요. async 및 defer가 모두 포함된 스크립트: 최신 브라우저에서는 비동기 속성이 우선 적용됩니다. 비동기를 지원하지 않는 이전 브라우저에서는 동작을 연기합니다. 실행 순서 예: 가능한 실행 순서: 1.js(블록 구문 분석) 3.js 또는 2.js(먼저 다운로드하는 것) 2.js 또는 3.js(둘 중 두 번째 다운로드) 4.js 5.js 2와 3은 어떤 순서로든 실행될 수 있으며, 1.js를 다운로드하는 데 시간이 더 오래 걸리는 경우에는 1보다 먼저 실행될 수도 있습니다. 모범 사례 분석과 같은 독립적인 스크립트에는 비동기를 사용하세요. DOM이나 다른 스크립트에 의존하는 스크립트에는 defer를 사용하세요. 비동기 또는 지연을 사용하여 일찍 다운로드를 시작하세요. 중요한 스크립트의 경우 에 인라인 스크립트를 고려하세요. 브라우저 지원 async와 defer는 모두 최신 브라우저에서 널리 지원됩니다. 이전 브라우저의 경우 스크립트 로더를 사용하거나 끝에 스크립트를 배치하는 것이 좋습니다.
