비동기 및 지연 이해-JS 튜토리얼-php.cn

비동기 및 지연 이해

王林

풀어 주다： 2024-08-09 01:58:42

원래의

843명이 탐색했습니다.

Understanding async and defer

프런트엔드 면접 질문 중 가장 많이 나오는 질문입니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!