HTML파일에 script를 포함시킬 때 <script>를 이용하는데, inline으로 스크립트를 작성하거나, src 속성에 자바스크립트의 위치를 지정해서 외부 스크립트를 불러올 수 있다.
이 포스트에서는 HTML파일에 외부 스크립트를 불러온 경우 HTML에서 일어나는 일을 순차적으로 이해하고, <script>의 속성인 async, defer 를 비교,정리해보았다.
1. body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="./js/common.js"></script>
</body>
</html>먼저 HTML은 <script> 태그를 만나면 파싱을 멈추고 스크립트 파일을 다운받고 (fetching) 실행한다. (executing)
1번처럼 body안에 스크립트를 추가하는 경우, HTML을 다읽고 스크립트 받아와 실행하기 때문에 유저가 HTML의 컨텐츠를 빨리 볼수있는 장점이있다.
그러나, 웹사이트가 스크립트에 의존적이라면 개발자가 의도한 정상적인 페이지를 유저에게 보여주기까지의 시간이 길어진다.
2. head + async
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" async src="./js/common.js"></script>
</head>
<body>
</body>
</html>
(credit: growingwiththeweb)
async는 블리언타입의 속성값으로, 선언하는 것만으로도 참이 되어 사용가능이 가능하다. async를 선언하면 브라우저가 HTML을 파싱하다가 async를 만나면 병렬로 다운로드하고 완료되면 그때 파싱을 멈추고 스크립트를 실행한다.
병렬적으로 다운로드가 일어나기문에 시간을 절약할 수 있다는 장점이 있다.
그러나 파싱되기전에 실행되기때문에 스크립트에 DOM요소를 조작하는 코드가 있다면 아직 요소가 정의되지않아 위험하며 파싱할 때 멈출수 있어서 유저가 컨텐츠를 보는데 오래걸린다.
3. head + defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" defer src="./js/common.js"></script>
</head>
<body>
</body>
</html>HTML이 파싱되다가 defer를 만나면 스크립트를 다운로드 하는 것을 명령시키고 파싱이 끝나 </html> 만났을 때 스크립트를 실행시킨다.
<script type="text/javascript" defer src="./js/common_1.js"></script>
<script type="text/javascript" defer src="./js/common_2.js"></script>
<script type="text/javascript" defer src="./js/common_3.js"></script>만약 위와 같이 다수의 스크립트 파일을 넣는 경우, async 속성을 이용해 다운받게되면 정의된 스크립트 순서와 상관없이 먼저 다운로드 완료된 스크립트 파일이 실행되므로, 순서에 의존적인 스크립트라면 문제가 될수있다.
반면 defer은 먼저 다운받아두고 실행은 html 파싱이 완료되면 스크립트가 실행되기 때문에 순서대로 원하는대로 스크립트가 실행되어 효율적이며 안전하다.
3. 요약
async와 defer 속성은 스크립트는 다운로드 시 페이지 렌더링을 막지 않는다는 공통점이 있다. 따라서 async와 defer를 적절히 사용하면 사용자가 효율적이게 페이지를 볼 수 있게한다.
| 속성 | 순서 | DOMContentLoaded |
|---|---|---|
| aync | 순서 상관없이 먼저 다운로드 된 파일이 실행 | HTML이 완전히 다운로드되지 않은 상태라도 로드 및 실행가능 (비동기 스크립트) |
| defer | 문서에 추가된 순으로 실행 | HTML 다운로드와 파싱이 완료된 후에, DOMContentLoaded 이벤트 발생 전에 실행 (지연 스크립트) |
