head : <script>를 <head>에 포함하는 경우, html parsing이 중간에 끊김
- : js 파일이 클 경우, 브라우저 html 로딩이 느려짐
body : <script>를 <body> 맨 끝에 포함하는 경우, html parsing은 중간에 끊지기 않지만, js파일을 fetch하기 전에 유저에 html 페이지가 먼전 랜딩
- : 페이지가 js에 의존적이라면, 사용자가 정상적인 페이지를 볼 수 있을때까지 시간이 오래 걸림
head+async : <script async>를 <head>에 포함하는 경우, html parsing과 동시에 js fetching을 함 → fetching이 끝난 후, html parsing을 멈추고 js executing을 함 → 이후 다시 html parsing을 진행
+ : 정상적인 페이지를 유저에게 한번에 delever
- : JS에서 html 요소가 필요한데, parsing이 안된 경우, 앱 충돌의 위험이 있음. 전체 페이지를 유저에게 랜딩하기까지 시간이 오래 걸림(less than 1번)
- : 여러 js 파일이 있는 경우, fetching된 순서대로 executing 되므로, 위험요소 존재
head+defer : <script defer>를 <head>에 포함하는 경우, html parsing과 동시에 js fetching을 함 → html parsing을 끝내고 → js 파일을 executing
