HTML 스크립트 비동기 실행이란?
HTML에서 async 속성을 사용하면 외부 스크립트가 다운로드되는 즉시 비동기적으로 실행됩니다. 이 속성은 외부 스크립트 파일에만 적용할 수 있으며, 페이지 로딩을 차단하지 않아 웹사이트의 전반적인 성능을 크게 향상시킵니다.
일반적인 <script> 태그는 브라우저가 스크립트를 다운로드하고 실행하는 동안 HTML 파싱을 멈추게 됩니다. 반면 async 속성을 추가하면 HTML 파싱과 스크립트 다운로드가 동시에 진행되고, 스크립트가 준비되는 대로 바로 실행됩니다.
1단계: 자바스크립트 파일 작성하기
먼저 간단한 함수를 담은 자바스크립트 파일을 만듭니다. 여기서는 파일 이름을 new.js로 지정하겠습니다.
function sayHello() {
alert("Hello World")
}2단계: HTML에 스크립트 연결하기
이제 위에서 만든 스크립트를 HTML 문서에 연결하고 실행해 보겠습니다. <script> 태그에 async 속성을 추가하면 됩니다.
<html>
<head>
<script src = "new.js" async></script>
</head>
<body>
<p>This is demo text.</p>
</body>
</html>async와 defer의 차이점
비동기 스크립트 처리 시 자주 함께 언급되는 defer 속성과의 차이를 알아두면 좋습니다.
- async: 스크립트가 다운로드되는 즉시 실행됩니다. 실행 순서가 보장되지 않으므로 독립적인 스크립트에 적합합니다.
- defer: HTML 파싱이 완료된 후에 스크립트가 순서대로 실행됩니다. DOM 조작이 필요한 스크립트에 적합합니다.
정리
async 속성은 외부 스크립트의 다운로드와 HTML 파싱을 병렬로 처리하여 페이지 로딩 속도를 개선하는 효과적인 방법입니다. 단, 실행 순서가 중요한 스크립트라면 defer 사용을 고려하는 것이 좋습니다.