비동기 및 지연 이해
- 王林원래의
- 2024-08-09 01:58:42767검색
프런트엔드 면접 질문 중 가장 많이 나오는 질문입니다. HTML, JS 및 성능에 대한 인터뷰 대상자의 지식을 테스트합니다.
프런트엔드 인터뷰 질문 시리즈의 질문 #1입니다. 준비 수준을 높이고 전반적인 최신 정보를 얻으려면 FrontendCamp에 가입하는 것을 고려해 보세요.
스크립트 태그는 HTML 페이지에 JavaScript를 추가하는 데 사용됩니다. 인라인 스크립트일 수도 있고 외부 스크립트일 수도 있습니다.
<body>
<!-- Some code before it -->
<script>
console.log("This is an inline script.");
</script>
<script src="https://example.com/external-script.js" />
<!-- Some code after it -->
</body>
HTML을 구문 분석하는 동안 브라우저가 스크립트 태그를 발견하면 HTML 구문 분석을 중지하고 JS 스크립트 실행을 시작합니다. 인라인이라면 바로 실행이 시작되지만, 외부 스크립트라면 다운로드 후 실행됩니다.
이 시간 동안 JS 스크립트를 다운로드하여 실행하는 동안 HTML 구문 분석이 차단됩니다. 브라우저에서 JS 스크립트 실행이 완료된 후에만 재개할 수 있습니다.
여기서 무엇이 문제인지 아시나요? 이로 인해 최종 사용자에게 성능 문제가 발생합니다. 스크립트가 많거나 스크립트 실행에 많은 시간이 걸리면 사용자는 오랫동안 페이지의 내용을 볼 수 없습니다.
이 문제를 정확하게 해결하기 위해 async와 defer라는 두 가지 속성이 있습니다.
비동기
비동기 속성이 있는 경우 HTML 구문 분석과 동시에 스크립트가 다운로드되어 사용 가능한 즉시 실행됩니다.
여러 스크립트가 비동기 속성을 사용하는 경우 실행 순서는 HTML에 나타나는 순서와 다를 수 있습니다. 먼저 사용 가능한 스크립트가 먼저 실행됩니다.
<body> <!-- Some code before it --> <script async src="https://example.com/external-script.js" /> <!-- Some code after it --> </body>
연기하다
defer 속성이 있는 경우 스크립트는 HTML 구문 분석과 동시에(비동기식처럼) 다운로드되지만 HTML 구문 분석이 완료된 후 DOMContentLoaded가 실행되기 전에 실행됩니다.
여러 스크립트에서 defer 속성을 사용하는 경우 비동기와 달리 실행 순서가 유지됩니다.
<body> <!-- Some code before it --> <script defer src="https://example.com/external-script.js" /> <!-- Some code after it --> </body>
요약
- HTML 구문 분석을 차단하지 않고 비동기 및 지연 다운로드 스크립트를 모두 사용합니다.
- 비동기 스크립트는 사용 가능한 즉시 실행됩니다. 잠재적으로 HTML 구문 분석을 차단할 수 있습니다.
- defer 스크립트는 HTML 구문 분석이 완료된 후 DOMContentLoaded가 실행되기 전에만 실행됩니다.
- 실행 순서가 중요하지 않고 스크립트가 DOM을 수정하지 않는 경우 비동기를 사용하세요.
- 실행 순서가 중요하거나 스크립트가 DOM을 수정하는 경우 defer를 사용하세요.
- 또한 이러한 속성은 인라인 스크립트, 즉 src 속성이 없는 스크립트에서는 작동하지 않습니다.
- async와 defer를 모두 추가하면 async가 우선 적용됩니다.
자원
MDN: 스크립트 요소
프론트엔드캠프
위 내용은 비동기 및 지연 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!