HTML 파일과 자바스크립트 파일이 열리는 과정을 확인하면서 async와 defer의 차이를 확인해봅시다. (드림코딩사랑해요)
HTML 파일을 parsing 하는 과정 중 js 파일을 먼저 실행하기 위해서 html <head>부분에 <script> 태그를 넣으면 js 파일이 html파일pasing 중간에 진행된 후 html 파일이 실행됩니다.
이렇게 진행하게 될떄, js 파일이 어마어마하게 크고 복잡하다면 html 파일이 pasing되지 않아서 웹페이지가 보이지 않을 수도 있다는 단점이 있습니다.
그래서 body 밑에 script 파일을 넣어서 html 파일을 다 pasing 하고 js 파일을 오픈하는 방법을 사용하면 웹 페이지는 빨리 열리겠죠?
하지만.... 이것 또한 문제가 있습니다. 어떤 문제일까요...
바로 기본적인 html은 볼 수 있지만? js에 의존하는 웹페이지라면.... 휑한 페이지가 확인 될 겁니다. (모든 컨텐츠를 js로 만든다면 빈칸이 보이겠죠?)
그래서 <script> 태그 내에 async와 derfer 라는 속성값을 사용하게 됩니다.
async
async 속성 값을 사용하게 되면 상기 그림과 같이 html pasing 도중에 병렬 형태로 js 파일이 fetching 됩니다. js 파일이 fetching 되면 html 파일 parsing이 중단되고 js 파일이 열리게 됩니다. js 파일이 열린 이후 html 파일이 다시 parsing 되게 됩니다.
장점 : body 끝에 사용되는 것보다 다운로드 받는 시간을 절약 가능
단점 : javascript 가 html parsing 되기전에 오픈에 되기 때문에 뭐.. 예를 들어 자바스크립트 파일에서 쿼리셀렉터를 이용해서 DOM 요소를 조작한다고 그러면 조작하려는 시점에 html이 우리가 원하는 요소가 아직 정의되어 있지 않을 수 있습니다. / html pasing 도중 멈추기 때문에 페이지 확인이 느려질 수 있다는 단점이 있습니다.
defer
defer 속성은 js 파일을 병렬로 다운로드하고 html 파일이 다 parsing 되고 나서 js 파일을 오픈하는 형태입니다.
당연히 가장 좋은 옵션이겠죠? 웹페이지도 볼 수 있고 js도 잘 녹여낼 수도 있고 ㅎㅎ
순서가 필요한 파일이라면 async와 defer을 넣어서 아름다운 웹페이지를 작성해보아요~
두 번 들어야합니다.
https://www.youtube.com/watch?v=tJieVCgGzhs&t=793s
'코딩 개발 > Javascript' 카테고리의 다른 글
| Javascript - event (0) | 2022.10.22 |
|---|---|
| Javascript - Object (0) | 2022.10.22 |
| JavaScript - Class (0) | 2022.10.20 |
| JavaScript - Scope (0) | 2022.10.20 |
| JavaScript - 객체 (0) | 2022.10.20 |
