요즘 개발 관련 포스팅도 많이 못쓰고 말이죠.. 곧 회사에서는 주 1회가량 스터디를 진행할 것 같습니다. 다 같이 강의를 보고 간략한 발표와 프로젝트를 수행하는 정도의 느낌으로 말이죠. 회의 때 이런저런 얘기를 하다 잘 몰랐던 부분이 있어 짚고 넘어가 보려 합니다.
브라우저는 HTML 문서를 읽는 도중에 <script>...</script> 태그를 만나면 DOM 생성을 멈추고 스크립트를 먼저 실행한다. 이 방식에는 2가지 이슈를 만들게 되는데..
첫 번째로 생성되지 않은 DOM 요소에 접근하는 스크립트가 먼저 실행됐다면 에러가 발생한다.
두 번째로 큰 사이즈의 스크립트가 중간에 껴 있을 경우 해당 스크립트가 실행되기 전까지 페이지 로드가 멈출 것이다.
이런 이슈를 해결하기 위해 보통의 경우 <body/> 태그가 끝나는 시점에 <script> 태그를 위치해 놓았다.
<body>
...
<script src="https://juni-official.tistory.com/guestbook"></script>
</body>
나도 이렇게 사용했지만 이 방법에도 단점이 존재한다. HTML 파일이 큰 경우 브라우저가 문서 전체를 로드한 뒤 스크립트를 받게 되므로 페이지가 완전히 로드되는데 많은 시간이 소요된다.
이 문제를 해결하기 위해서 <script> 태그에서 제공하는 defer와 async 속성이 있다.
defer
<body>
<p>content</p>
<script defer src="https://juni-official.tistory.com/guestbook"></script>
...
</body>
defer 속성은 해당 스크립트를 백그라운드에서 다운로드하게 해 준다. 그러므로 브라우저는 멈추지 않고 HTML 문서를 읽을 수 있다. 백그라운드에서 다운로드된 스크립트는 "DOMContentLoaded" 이벤트 발생 전에 실행된다.
단, defer 속성은 src 속성이 있는 경우에만 작동하므로, HTML 안에 직접 스크립트를 작성한 경우에는 작동하지 않는다.
async
async(비동기) 스크립트는 defer와 마찬가지로 백그라운드에서 스크립트가 다운로드되지만, 페이지와 완전히 독립적으로 동작한다. "DOMContentLoaded" 이벤트와 async 스크립트는 서로를 신경 쓰지 않고 async 스크립트가 먼저 실행될 수 있고 DOMContentLoaded 이벤트가 머너 실행될 수도 있다.
실행은 다운로드가 끝난 순으로 진행된다. 다운로드 후 스크립트가 실행될 때에는 브라우저 파싱이 멈춘다.
요약
출처
defer, async 스크립트
ko.javascript.info