script 태그를 html 문서의 어느 위치에 작성하느냐에 따라서 페이지 로드에 걸리는 시간이 달라진다.
그러면 script 태그의 위치를 어떻게 해야 효율적일까?? (그동안 프로젝트할 때는 계속 body에 넣거나 head에 넣거나 딱히 생각하지 않고 했었다.)
💯 확실하게 알아두자!!!
📓 head 태그 안 script
script 태그 만나면 html 파싱 멈추고 서버에서 js 파일 다운받아(파싱) 실행시킨 다음에 나머지 html 실행.
단점 : 시간 소모 큼
📓 body 태그 안 script (단 body 태그 마지막 줄에)
html 파싱이 끝나면 파싱, 실행
JS 받기 전에 html 컨텐츠를 먼저 볼수 있지만 JS에 의존적인 사이트면 오래 기다려야 함.
📓 head 태그 안 async
HTML 파싱 도중 async 있으면 HTML 파싱과 동시에 JS 파일 다운.
다운 완료되면 파싱 멈추고 JS 실행. 이후 나머지 HTML 파싱.
- body에 사용하는 것보다는 시간 절약.
- 파싱 전에 실행되기 때문에 JS 파일 내에 queryselector로 DOM요소 조작할 때 HTML요소가 파싱 안되는 상황 발생.
- HTML 파싱하는 동안 JS 실행하느라 멈춰야 해서 시간 더 걸릴 수 있음.
📓 head 태그 안 async (js 파일 여러 개)
<head>
<title>Document</title>
<script async src="js/a.js"></script>
<script async src="js/b.js"></script>
<script async src="js/c.js"></script>
</head>
<body>
<div></div>
</body>
어떤게 먼저 다운 될지 모르기 때문에 무작위로 다운 받아지는 JS파일 먼저 실행.
📓 head 태그 안 defer
defer 보이면 JS 다운만 하고 HTML 파싱 끝나면 바로 JS 실행.
📓 head 태그 안 defer (JS 파일 여러 개)
순서대로 다운받고 원하는 순서대로 실행된다.
효율적이고 안전
🔥🔥 결론
head 태그 안 defer를 애용하자.
일상의 인연에 감사하라. 기적은 의외로 가까운 곳에 있을지도 모른다.