[JS] script async와 defer의 차이점

요들레이후·2022년 3월 29일
0

Javascript

목록 보기
2/11
post-thumbnail

드림코딩 by 엘리 : 자바스크립트 기초 강의 (ES5+)

📌 <script/> 위치

1. <head/>


<script/>태그를 <head/>태그 안에 넣으면 HTML을 parsing하고 중간에 JS파일들을 다운받아 불러오므로 사용자가 웹사이트를 보는데 시간이 오래 걸림


2. <body/>


<body/>안 끝부분에 <script/>를 넣으면 기본적인 HTML컨텐츠는 볼 수 있지만, 웹사이트가 자바스크립트에 의존적이라면 이 또한 정상적인 페이지를 볼 때까지 JS파일을 fetching하는 시간이 오래걸림


3. <head/> + <script asyn/>


async 옵션을 사용하게 되면 브라우저가 HTML다운받아 parsing하다가 JS파일을 병렬로 다운 받자는 명령만 하고 JS가 다운로드가 완료가되면 그때 parsing을 멈추고 JS파일을 실행하는것. body끝에 사용하는 것 보다는 JS파일 다운로드 받는 시간을 절약
👉 단점 : JS가 HTML이 parsing 되기 전에 실행되기 때문에 JS파일에서 DOM요소를 조작하는 시점에 HTML이 정의되지 않을 수도 있기에 위험. HTML파싱 동안에 JS를 실행하기 위해서 HTML을 멈출 수 있기 때문에 사용자가 페이지를 보는데 시간 오래 걸림


4. <head/> + <script defer/>


defer옵션은 parsing하다가 JS를 다운받자고 명령만 시켜놓고 나머지 HTML을 끝까지 parsing, parsing이 끝난 후에 다운로드 완성된 JS파일을 실행함, 가장 좋은 옵션.


5. <script asyn/> vs <script defer/>


정의된 스크립트 순서에 상관없이 다운로드가 먼저 된 파일을 실행, JS파일이 순서에 의존적이라면 async 추천 X.

순서대로 스크립트가 실행이 됨. 제일 효율적이고 안전하다.

profile
성공 = 무한도전 + 무한실패

0개의 댓글