JS - async, defer

1. head안 script

• 사용자가 html 파일을 다운받으면 브라우저가 html을 한줄한줄 분석(parsing)함
• 분석하고 이해한 것을 CSS와 병합해서 DOM요소로 병합함
• 분석하다가 script 보이면 html 분석하는 것을 멈추고
• 필요한 js파일을 서버에서 다운받아서 실행한 다음 다시 html을 분석함

단점)

• js파일의 크기가 크고 인터넷이 느리면 사용자가 웹사이트를 보는데 많은 시간이 소요

2. body안 맨 끝 script

• 브라우저가 html 다운받아 parsing해서 페이지 준비 이후
• 스크립트 만나 서버에서 다운받고 실행
• 페이지가 js받기 전에 준비가 되어서 사용자가 페이지 컨텐츠 볼 수 있음

단점)

• 사용자가 기본적인 html 컨텐츠를 빨리 본다는 장점은 있지만
  만약 웹사이트가 js에 의존적이라면 사용자가 의미있는 컨텐츠를 보기 위해서는 기다려야함

3. head안 script - async

async는 불리언 타입의 속성값이기 때문에 선언하는 것만으로도 true로 설정되어서 사용가능

• 브라우저가 html을 다운받아서 parsing하다가 async 발견하면 병렬로 main.js파일 다운받자고 명령만 해놓고 다시 parsing하다가 main.js가 다운로드 완료되면 그 때 parsing하는 것을 멈추고 다운로드된 js파일을 실행함. 실행 다 하고 나서 나머지 html parsing

장점)

• parsing하는 동안 다운로드가 병렬적으로 일어나기 때문에 다운로드 받는 시간을 절약할 수 있음.

단점)

• js가 html이 parsing되기도 전에 실행되기 때문에 만약 js파일에서 쿼리셀렉터를 이용해 DOM요소를 조작한다고 하면, 조작하려고 하는 시점에 html이 우리가 원하는 요소가 아직 정의되지 않을 수 있음
• html을 parsing하는 동안 언제든지 js를 실행하기 위해서 멈출수 있기 때문에 사용자가 페이지를 보는데 여전히 시간이 걸림

4. head안 script- defer

• parsing하다가 script defer있으면 다운로드 받자고 명령만 해놓고 나머지 html을 끝까지 parsing.
• parsing이 끝나면 다운로드 되어진 js 실행
• 가장 좋은 옵션!

_

async와 defer 차이점 이해하기

- async 옵션으로 다수의 스크립트 다운로드 받게 되면

정의된 스크립트 순서에는 상관없이 다운로드가 먼저되면 먼저 실행
때문에 순서에 의존적인 js라면 문제 발생

- defer의 경우

parsing하는 동안 필요한 js를 다 다운받고 순서대로 실행
우리가 원하는대로 스크립트가 실행됨.

'use strict'; 선언하게 되면
비상식적인 것을 사용할 수 없게됨.

parsing : 분석
fetching : 다운로드
executing : 실행

이미지 출처 : 드림코딩