브라우저는 한 줄씩

브라우저가 유저에게 화면을 보여줄 때 위에서부터 한 줄씩 보여준다.
즉, html태그를 하나씩 보여준다는 것이다.

아래는 브라우저가 화면을 보여주는 4가지 예시이다.
각 예시들의 장.단점을 기억하자.

예시 1. 아무것도 하지 않았을 때(header에 넣기)

• 간단 정리

html parsing -> script만났다? html parsing멈춤 ->
main.js다운 및 실행 -> 다시 html parsing -> 페이지로딩

• 로딩과정

1. html을 위에서부터 한 줄씩 parsing해준다.
2. parsing 중 script태그를 만나면 진행 중인 parsing작업을 멈추고 서버에서 main.js를 다운받고 실행시킨 후 다시 parsing한다.
3. 유저에게 화면이 보여진다.(page is ready)

• 단점
  사용자가 웹사이트를 보기까지 많은 시간이 걸린다.

예시 2. 아무것도 하지 않았을 때(body의 끝에 넣기)

• 간단정리

html parsing -> 페이지로딩 -> script의 main.js 다운 및 실행

• 로딩과정

1. 똑같이 위에서부터 parsing이 이루어진다.
2. body태그의 끝부분에 script를 넣었기때문에 우선 페이지가 준비가 된 후에 서버에서 main.js를 다운받고 실행한다.

• 장점
  유저가 브라우저 화면을 빨리 볼 수 있다.

• 단점
  화면을 빨리 볼 수 있는 반면에, 서버에 있는 main.js를 다운 받고 실행하기 전까지 유저가 기다려야 한다.
  예) 서버에 있는 데이터 받아오기, DOM요소 수정하기 등이 main.js에 있다면 그 작업들이 다운받고 실행되기 전까지 유저가 기다려야하는 단점이 있다.

예시 3. head에서 async 옵션 사용하기

• 간단정리
  html parsing -> async만났다? 병렬로 main.js 다운 -> main.js 다운받으면서 parsing은 계속 진행 -> 만약 html parsing 작업 중 main.js 다운이 끝났다? 그러면 html parsing을 멈추고 main.js를 실행 -> 나머지 html parsing을 계속 진행 -> 페이지로딩

• 장점
  main.js를 다운받는 시간을 절약할 수 있다.

• 단점

  • html parsing이 완료되기 전 실행되기 때문에, 만약 사용해야 하는 요소가 parsing이 되지 않았다면 parsing이 완료되기까지 기다려야한다.
  • parsing 중 js를 실행하기 위해 parsing이 멈출 수 있기때문에 사용자가 화면을 보는데까지 시간이 걸릴 수 있다.

예시 4. head에서 defer 옵션 사용하기

• 간단정리
  html parsing -> defer를 만났다? main.js다운 -> js다운받으면서 parsing 계속 진행 -> parsing 작업이 완료 -> 페이지로딩 -> 다운로드 되어진 js를 실행한다

• async와 defer의 차이점 1

1. parsing 작업
   async : parsing 작업 진행 중 다운이 완료되면 js를 실행 후 나머지 parsing
   defer : parsing 작업이 모두 완료 후 js를 실행

2. 실행 순서

# 작업순서
a 작업
b 작업
c 작업

# 다운로드 순서
b 작업
a 작업
c 작업

async : 먼저 다운로드 된 것부터 실행
예 ) b 실행 -> a 실행 -> c 실행

defer : 순서대로 실행
예) a 실행 -> b 실행 -> c 실행