[TIL]script의 defer , async 속성
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 이벤트 발생 전에 실행 (지연 스크립트) |
Author And Source
이 문제에 관하여([TIL]script의 defer , async 속성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hikoand/defer-async저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)