스크립트 태그 속성: async & defer HTML5 브라우저의 태그. 다음은 몇 가지 통찰력입니다.</p> <h3>성능에 미치는 영향</h3> <ul> <li> <p><strong>async:</strong></p> <ul> <li>스크립트가 로드되자마자 실행합니다. 실행 순서를 보장하지 않습니다.</li> <li>스크립트 다운로드 동시에 잠재적으로 페이지 로드 속도가 향상됩니다.</li> </ul> </li> <li> <p><strong>defer:</strong></p> <ul> <li>표시되는 스크립트 실행 순서를 보장합니다. </li> <li>HTML이 구문 분석된 후 스크립트를 로드하여 페이지가 약간 지연됩니다. 렌더링.</li> </ul> </li> </ul> <h3>최적의 사용</h3> <p><strong>사이트 로드 속도 향상:</strong></p> <ul> <li>비동기식으로 스크립트 배치 페이지 하단에 추가하면 페이지 로드가 향상될 수 있습니다. </li> <li>페이지 상단에 async 또는 defer가 있는 스크립트를 배치하면 렌더링 지연을 줄일 수도 있습니다.</li> <li>이러한 속성은 HTML4 브라우저에 큰 영향을 미치지 않을 수 있습니다.</li> </ul> <h3><script defer 사용 src=...></h3> <ul> <li><head>에서 스크립트 연기 </body> 앞에 배치하는 동작을 모방합니다.</li> <li>그러나 올바른 순서로 실행되도록 보장합니다.</li> <li>HTML4 브라우저에서는 여전히 지연이 발생할 수 있습니다.</li> </ul> <h3><스크립트 비동기 사용 src=...></h3> <ul> <li>비동기가 활성화된 스크립트는 동시에 다운로드됩니다.</li> <li>실행 순서는 보장되지 않으며 종속성이 있는 경우 문제가 발생할 수 있습니다.</li> </ul> <h3>순서 고려 사항</h3> <ul> <li>서로 의존하는 스크립트는 다음과 같은 경우에도 올바른 순서를 유지해야 합니다. async.</li> <li>실행 순서가 중요한 경우 defer 사용을 고려하세요.</li> </ul> <h3>권장사항</h3> <p>HTML5가 널리 보급됨에 따라 async 및 defer를 실험해 보는 것이 좋습니다. 속성. 하지만 최적의 호환성과 안정성을 위해서는 그동안은 그대로 두는 것이 좋습니다.</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
