[JavaScript] script async 와 defer의 차이점

head안에 script 포함

parsing HTML 브라우저가 한줄 한줄 분석한다. 
parsing + css와 병함 -> DOM 요소로 변환

-> 많은 시간이 걸린다.

head안 script + async사용 -> 병렬적

정의된 스크립트 순서에 상관없이, 먼저 다운로드 되는 파일 실행
장점 : fetching이 parsing하는 동안에 병렬적으로 일어나서 다운받는 시간 절약
단점 
    - html이 parsing되기도 전에 javascript가 실행이 됨 
        -> 원하는 요소가 아직 정의되어있지 않을 수 있어 위험
    - 페이지 보는 동안, parsing HTML 멈추고 blocked되어있을 수 있어서, 페이지보는데 시간 오래 걸림.

head안 script + defer사용 -> 병렬적

정의된 스크립트 순서에 맞게 실행된다.
    script안에 있는 js 파일, fetching 다운로드 받아놓고, parsing HTML이 다 끝난 후에 executing 됨
    가장 좋은 방법이다.

body안에 script 포함

-> javascript에 의존적이라면 (사용자가의미있는 컨텐츠 보려면 javscript하려면) fetching 시간 executing 시간 모두 기다려야한다.

 

 

결론은 head + defer 방식이 가장 안전하고 효율적!!