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 방식이 가장 안전하고 효율적!!