HTML <script> async 속성

HTML <script> 태그

정의와 사용법

async 속성은 부울 속성입니다.

설정된 경우 async 속성은 페이지를 해석하는 동시에 병행하여 다운로드되고, 사용 가능할 때 즉시 실행됩니다. 스크립트가 완전히 다운로드되면 페이지 해석이 중지되고 스크립트가 실행되고, 그 다음 페이지의 나머지 부분을 해석합니다.

주의:async 속성은 외부 스크립트에만 적용되며(src 속성이 존재할 때만 사용해야 합니다).

주의:외부 스크립트를 여러 가지 방식으로 실행할 수 있습니다:

  • async가 설정되었으면: 스크립트는 페이지를 해석하는 동시에 병행하여 다운로드되고, 사용 가능할 때 즉시 실행됩니다(해석이 완료되기 전에)
  • defer가 설정되었고 async가 설정되지 않았으면: 스크립트는 페이지를 해석하는 동시에 병행하여 다운로드되고, 페이지 해석이 완료되면 실행됩니다
  • async 또는 defer가 없으면: 스크립트는 즉시 다운로드되고 실행되며, 페이지 해석을 차단하고 스크립트 실행이 완료될 때까지 기다립니다

예제

참조된 스크립트는 페이지를 해석하는 동시에 병행하여 다운로드되고, 사용 가능할 때 즉시 실행됩니다:

<script src="demo_async.js" async></script>

자신이 직접 시도해보세요

문법

<script async>

비동기 스크립트 실행

브라우저가 script 요소를 만나면 로드와 실행을 동시에 일시 중지하고 페이지 처리를 멈추는 것이 기본적인 행동입니다. 각 script 요소는 정의된 순서대로 순차적으로 동기적으로 실행됩니다(스크립트 로드와 실행 중에는 다른 일에 대한 관심을 기울이지 않습니다).

스크립트 처리의 기본 방식으로 동기적 순차적으로 실행하는 것은 의미가 있습니다. 그러나 이러한 처리가 필요하지 않은 스크립트가 있을 수 있습니다. 이러한 스크립트에는 async 속성을 사용하여 성능을 향상시킵니다. 이 분야의 한 예시는 추적 스크립트(tracking script)입니다. 이 스크립트는 광고 회사가 사용자의 웹 사이트 방문 기록을 보고하여 사용자의 습관에 맞게 광고를 제작하고 배포하거나, 웹 사이트 방문자의 통계 데이터를 수집하여 분석하기 위해 사용될 수 있습니다. 이러한 스크립트는 독립적으로 작동하며, 일반적으로 HTML 문서의 요소와 상호작용하지 않습니다. 페이지를 표시하기 위해 스크립트가 로드되고 서버로 보고서를 전송하기 위해 페이지 표시를 지연시키는 것은 의미가 없습니다.

사용 async 속성을 사용하면, 브라우저는 HTML의 다른 요소(다른 script 요소 포함)를 분석하면서 스크립트를 동기적으로 로드하고 실행합니다. 적절히 사용하면 전체 로드 성능을 크게 향상시킬 수 있습니다.

주의:사용 async 속성의 중요한 결과로 페이지에서의 스크립트가 정의된 순서대로 실행되지 않을 수 있습니다. 따라서 스크립트가 다른 스크립트에서 정의된 함수나 값을 사용하는 경우, 사용을 피하는 것이 좋습니다. async 속성.

브라우저 지원

표에서는 해당 속성을 최초로 완전히 지원하는 브라우저 버전이 나와 있습니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
8.0 10.0 3.6 5.1 15.0

HTML <script> 태그