데굴데굴

TIL: 2023-06-05 본문

Lesson/TIL

TIL: 2023-06-05

aemaaeng 2023. 6. 5. 16:01

⚙️ 오늘 학습한 내용

async, defer

🗝 키워드

async, defer, DOM

🗣 스스로에게 설명

브라우저는 DOM 트리를 생성하다가 <script> 태그를 만나면 파싱을 중지하고 자바스크립트 파일을 실행한다.
<script> 태그를 <body> 태그 시작점에 작성하면 DOM 트리가 생성되지 않은 상태이므로 작성한 자바스크립트 코드가 예상대로 작동하지 않을 가능성이 크다. 또 스크립트 파일이 크다면 이걸 파싱하는 동안 DOM 트리는 생성되지 않기 때문에 사용자에게 빈 화면이 보여지게 되어 나쁜 UX를 제공할 수도 있다.

따라서 DOM 트리가 완전히 생성되고 나서 자바스크립트 파일이 실행되도록 <body> 태그가 끝나기 직전에 <script> 태그를 삽입하는 것이 흔한 해결 방법이다.
ES6부터 <script> 로드 옵션에 async와 defer가 추가되었는데 두 방식이 어떤 차이를 갖고 있는지 정리해보았다.

1. async

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Document</title>
    <script async src="main.js"></script>
  </head>
  <body>
    <div></div>
  </body>
</html>

<script> 태그에 async 옵션을 넣으면 자바스크립트 파일을 불러오는 것과 HTML 파싱이 병렬적으로 실행된다.
자바스크립트 파일을 불러온 후 그 파일을 실행할 때에는 HTML 파싱이 중단된다.
따라서 자바스크립트 파일에 DOM API를 사용하는 코드가 있다면 예상한 대로 작동하지 않을 수 있다.
그리고 파일을 불러오고 나서 바로 실행하기 때문에 언제든지 HTML 파싱이 중단될 수 있어 화면이 보여지다가 뚝 끊길 수도 있다.

2. defer

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Document</title>
    <script defer src="main.js"></script>
  </head>
  <body>
    <div></div>
  </body>
</html>

defer 옵션은 HTML이 파싱되는 동안 자바스크립트 파일을 불러오고 HTML 파싱이 끝난 후에 자바스크립트 파일을 실행한다.
<body> 태그가 끝나기 직전에 스크립트 파일을 불러오는 방식에서는 HTML 파싱이 끝나고 자바스크립트를 불러오는 것과 실행하는 시간이 함께 소요되지만, defer에서는 파일을 미리 불러온 상태이기 때문에 실행만 하면 되어 시간이 더 단축된다.

스크립트 파일이 여러 개일 경우

여러 스크립트 파일이 상호 의존적이고 순서가 중요하다면 async보다는 defer를 쓰는 것이 권장된다.
async에서는 파일의 순서가 어떻든 먼저 불러온 파일을 먼저 실행하기 때문이다.
defer는 정의된 순서대로 파일을 실행한다.

 

각 실행 방식을 그림으로 보면 아래와 같다. 

 

참고

 

 

script 태그의 async와 defer 속성

script 태그의 async속성과 defer속성에 대해서 알아보고 script 요소가 렌더링에 미치는 영향에 대해서 간단하게 알아봅니다.

kimlog.me

 

 

async vs defer attributes

The async and defer attributes for the <script> element have great support now, so it’s time to learn exactly what they do!

www.growingwiththeweb.com

 

'Lesson > TIL' 카테고리의 다른 글

TIL: 2023-06-08 Proxy Pattern  (0) 2023.06.08
TIL: 2023-06-07 Singleton Pattern  (0) 2023.06.07
TIL: 2023-05-11  (0) 2023.05.11
TIL: 2023-05-08  (0) 2023.05.08
TIL: 2023-05-06  (0) 2023.05.06
'Lesson/TIL' Related Articles more
Comments