Santos의 개발블로그

Script async, defer 본문

Language & Framework & Library/JavaScript

Script async, defer

Santos 2020. 8. 1. 14:14

* 이 글은 드림코딩 by 엘리님 유투브 https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w 참고하였습니다. 

#1: <head>에 <script>를 추가할 때

@1-1 순서

  1. html 코드를 구문분석하다가 javaScript 코드를 만나면 잠깐 blocked 합니다.
  2. javaScript 코드를 fetching, executing을 거칩니다.
  3. 다시 html 코드를 구문분석합니다. 

@1-2 장, 단점

  • 만약 js파일에 크기가 엄청크고, 인터넷이 엄청 느리다면, 사용자가 웹사이트에 접근하기까지 많은 시간이 소요됩니다.
  • header에 script 코드를 넣는 것은 좋은 방법이 아닙니다.

#2: <body>끝 부분에 <script>를 추가할 때

@2-1 순서

  1. html 코드를 구문분석합니다.
  2. javaScript 코드를 fetching, executing을 거칩니다.

@2-2 장, 단점

  • html의 구문분석이 먼저 끝나기 때문에 사용자의 웹 접근성은 이전 방법보다는 좋습니다.
  • 하지만 웹사이트가 javaScript에 의존적이라면, 사용자가 웹사이트에 접근하기까지 많은 시간이 소요됩니다.

#3: <head>에 <script>내 async 옵션을 추가할 때

 

@3-1 순서

  1. html 코드를 구문분석과 동시에 병렬로 javaScript fetching을 시작합니다. 
  2. executing이 시작되면 html 코드를 잠시 blocked하게 됩니다. 
  3. executing이 끝이나면 남아있은 html 코드를 구문분석합니다.

@3-2 장, 단점

  • 병렬적으로 진행이 되니 때문에, javaScript, html 코드를 다운로드 받는 시간을 절약할 수 있습니다.
  • 하지만 javaScript가 html이 구분분석이 되기 전에 실행 되기 때문에 만약 javaScript 파일에서 querySelector 요소를 이용해 DOM 요소를 조작했을 때 문제가 일어날 수가 있습니다. ( 파싱되지 않은 HTML 코드를 querySelector로 찾을 때)
  • 마찬가지로 executing 할 때 html 코드 구문분석이 blocked 되기 때문에 사용자가 웹사이트에 접근하기까지 많은 시간이 소요될 수도 있습니다.

#4: <head>에 <script>내 defer 옵션을 추가할 때

@3-1 순서

  1. html 코드를 구문분석과 동시에 병렬로 javaScript fetching을 시작합니다.  
  2. html 코드 구문분석이 끝이나면 executing을 합니다.

@3-2 장, 단점

  • html 코드 구문분석이 먼저 끝나고, download 되어진 javaScript를 executing 하게 되면 사용자에게 먼저 페이지를 보여주고, 그 다음 javaScript가 실행되기 때문에 Best choice라고 할 수 있습니다.

#5: async 와 defer 옵션 비교

async
defer

- 다수의 js파일을 fetching 할 때, 순서에 의존되는 javaScript파일이라면, async 옵션은 여러가지 문제를 일으킬 확률이 높습니다. 

- 반면 defer는 다수의 js파일을 fetching 하더라도 html 구문분석이 끝나고 난 후 Download된 javaScript 파일을 executing 하기 때문에 문제를 최소화할 수 있습니다. 

< 참고자료 >

 

[사이트] #드림코딩 by 엘리

https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2

 

<JavaScript> async, defer end

저작자표시

'Language & Framework & Library > JavaScript' 카테고리의 다른 글

브라우저의 Rendering (2) - Operation  (0) 2021.04.03
브라우저의 Rendering (1) - Construction  (0) 2021.02.28
ES2020 - 10 New javaScript Features  (0) 2020.07.26
ES5 .Intro(12) - DOM(Document Object Model)  (0) 2019.12.29
ES5 .Intro(11) - setTimout & setInterval  (0) 2019.12.28
'Language & Framework & Library/JavaScript' Related Articles more
Comments