🤿 (7) 리소스 로드 최적화 - async와 defer

두번째 포스팅 “(1) 내가 작성한 코드 → 웹 화면에 나오기까지 - 브라우저 렌더링 과정”에서 자바스크립트 파싱 과정에 대해 학습하였다.

다음은 그 설명 중 하나이다.

• 파싱 과정에서 <script> 태그를 만나면 렌더링 엔진은 파싱을 잠시 중단하고 script를 읽는다.

이로 인해 리소스를 다운로드하고, 파싱하고, 실행하는 동안

화면 렌더링에 속도 지연이 생기는 것을 막기 위한 방법이 있다.

이번 포스팅에서는 그 방법인 async와 defer에 대해 알아보고자 한다.

async

일반 스크립트에 async 속성이 존재하면 HTML 구문 분석 중에도 스크립트를 가져오며, 사용 가능해지는 즉시 실행한다.

출처: 개인 블로그 - [Browser] async와 defer

• async 속성을 추가할 경우 true, 속성이 존재하지 않을 경우 false를 의미

<script src="a.js" async>
<script src="b.js" async>
<script src="c.js" async>

만약 여러 스크립트 태그에 async 속성이 있을 경우 그 순서를 보장하지 않는다.

따라서 스크립트 파일에 종속성이 없을 경우 사용하는 것이 좋다.

defer

브라우저가 HTML 구문 분석 중 스크립트를 가져오지만, 즉시 실행하는 것이 아닌 DOM의 첫번째 생명 주기인 DOMContentLoaded 이전에 실행된다.

출처: 개인 블로그 - [Browser] async와 defer

• defer 속성을 추가할 경우 true, 속성이 존재하지 않을 경우 false를 의미

<script src="a.js" defer>
<script src="b.js" defer>
<script src="c.js" defer>

defer 속성을 가진 스크립트는 문서상의 순서를 따라 실행되므로,

스크립트 파일에 종속성이 있을 경우 사용하는 것이 좋다.

출처
개인 블로그 - [Browser] async와 defer
velog - 웹 브라우저의 작동 구조
mdn 문서 - <script>: 스크립트 요소