* 이 글은 드림코딩 by 엘리님 유투브 https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w 참고하였습니다.
#1: <head>에 <script>를 추가할 때
@1-1 순서
- html 코드를 구문분석하다가 javaScript 코드를 만나면 잠깐 blocked 합니다.
- javaScript 코드를 fetching, executing을 거칩니다.
- 다시 html 코드를 구문분석합니다.
@1-2 장, 단점
- 만약 js파일에 크기가 엄청크고, 인터넷이 엄청 느리다면, 사용자가 웹사이트에 접근하기까지 많은 시간이 소요됩니다.
- header에 script 코드를 넣는 것은 좋은 방법이 아닙니다.
#2: <body>끝 부분에 <script>를 추가할 때
@2-1 순서
- html 코드를 구문분석합니다.
- javaScript 코드를 fetching, executing을 거칩니다.
@2-2 장, 단점
- html의 구문분석이 먼저 끝나기 때문에 사용자의 웹 접근성은 이전 방법보다는 좋습니다.
- 하지만 웹사이트가 javaScript에 의존적이라면, 사용자가 웹사이트에 접근하기까지 많은 시간이 소요됩니다.
#3: <head>에 <script>내 async 옵션을 추가할 때
@3-1 순서
- html 코드를 구문분석과 동시에 병렬로 javaScript fetching을 시작합니다.
- executing이 시작되면 html 코드를 잠시 blocked하게 됩니다.
- executing이 끝이나면 남아있은 html 코드를 구문분석합니다.
@3-2 장, 단점
- 병렬적으로 진행이 되니 때문에, javaScript, html 코드를 다운로드 받는 시간을 절약할 수 있습니다.
- 하지만 javaScript가 html이 구분분석이 되기 전에 실행 되기 때문에 만약 javaScript 파일에서 querySelector 요소를 이용해 DOM 요소를 조작했을 때 문제가 일어날 수가 있습니다. ( 파싱되지 않은 HTML 코드를 querySelector로 찾을 때)
- 마찬가지로 executing 할 때 html 코드 구문분석이 blocked 되기 때문에 사용자가 웹사이트에 접근하기까지 많은 시간이 소요될 수도 있습니다.
#4: <head>에 <script>내 defer 옵션을 추가할 때
@3-1 순서
- html 코드를 구문분석과 동시에 병렬로 javaScript fetching을 시작합니다.
- html 코드 구문분석이 끝이나면 executing을 합니다.
@3-2 장, 단점
- html 코드 구문분석이 먼저 끝나고, download 되어진 javaScript를 executing 하게 되면 사용자에게 먼저 페이지를 보여주고, 그 다음 javaScript가 실행되기 때문에 Best choice라고 할 수 있습니다.
#5: 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 |
