비동기 스크립트 실행

script 요소의 async 특성을 사용하면 관련 스크립트를 페이지의 나머지 부분과 비동기로 로드 및 실행할 수 있습니다. 즉, 페이지 구문 분석을 계속 진행하는 동안 스크립트를 백그라운드에서 로드하여 실행하게 됩니다. 처리량이 많은 스크립트를 사용하는 페이지의 경우 async 특성을 사용하면 페이지 로드 성능을 크게 높일 수 있습니다.

async 특성

async 특성은 W3C(World Wide Web 컨소시엄) HTML5 사양의 일부이며, 스크립트에 대한 종속성은 없지만 가능한 한 빨리 스크립트를 실행해야 하는 상황에 맞게 설계되었습니다. 다음 가상 예제에서 async(또는 defer) 특성이 없으면 스크립트에서 다른 페이지 콘텐츠가 로드되지 않도록 차단할 수 있습니다.

Lilah는 많은 스크립트 기반 위젯을 활용하는 개인 블로그를 가지고 있습니다. 이러한 위젯은 방문자의 환경을 향상시키는 역할을 하지만 위젯을 로드하지 않아도 페이지가 제대로 작동합니다. Lilah는 스크립팅을 사용하지 않고 사용자를 지원하려고 합니다. 현재 Lilah는 모든 위젯을 HTML 파일 위에 로드하지만 긴 스크립트 실행 시간 때문에 페이지를 로드하는 데 시간이 너무 오래 걸린다는 불만을 받았습니다. Lilah는 작업 속도를 개선하기 위해 스크립트를 페이지 끝으로 이동했지만 콘텐츠가 너무 많아서 이렇게 변경해도 향상된 사이트 환경이 충분히 빠르게 작동하지 않습니다. Lilah가 원하는 것은 페이지의 나머지 부분을 차단하지 않고 위젯이 가능한 한 빨리 로드되도록 하는 것입니다. 빠른 검색 후 Lilah는 HTML5 async 특성이 바로 필요한 기능임을 발견합니다. 모든 스크립트 기반 위젯을 외부 파일에 배치함으로써 성능과 스크립트 기반 고급 기능의 균형을 향상시켜 빠르게 다시 실행합니다.


<head>
  <title>Lilah's Blog</title>
  <script async src="widgets.js"></script>
</head>


구현 세부 정보

Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 script 요소의 asyncdefer 특성을 모두 지원합니다(defer 특성은 이전 Windows Internet Explorer 버전에서 지원됨). asyncdefer 특성은 src 특성이 있는 경우에만 사용할 수 있습니다. 가능한 네 가지 조합은 다음과 같습니다.

사용법설명

<script src="widgets.js"></script>

스크립트를 즉시 실행하며, 페이지 구문 분석을 계속 진행하기 전에 스크립트가 완료될 때까지 기다립니다. 이 경우 페이지 로드 성능이 훨씬 저하될 수 있습니다.

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

페이지 구문 분석을 계속 진행하는 동안 스크립트를 비동기로 다운로드하게 됩니다. 다운로드가 완료된 후 스크립트를 실행합니다.

<script defer src="widgets.js"></script>

페이지 구문 분석이 완료되면 스크립트를 실행합니다.

<script async defer src="widgets.js"></script>

async 특성은 적용되고 defer 특성은 무시됩니다. 이 경우 개발자가 async를 지원하는 브라우저에서는 이 특성을 사용하고, async를 지원하지 않는 브라우저에서는 defer로 대체할 수 있습니다.

 

요약하면, 웹 개발자는 async를 사용하여 최소한의 노력으로 페이지 로드 시간을 개선할 수 있습니다. 또한 스크립트 로더 라이브러리에 필요한 브라우저별 해결 방법 수가 줄어듭니다.

API 참조

async
defer

Internet Explorer 테스트 드라이브 데모

HTML5 비동기 스크립트

IEBlog 게시물

"Promises"를 사용한 JavaScript의 비동기 프로그래밍

사양

HTML5: 섹션 4.3.1

 

 

표시:
© 2014 Microsoft