1. <head/> 태그에 위치한다.
ex)
<!DOCTYPE html>
<html lang="en">
<head>
...
<script src="index.js"></script>
</head>
<body>
...
</body>
</html>장점) 웹사이트가 완벽한 형태로 보여짐.
단점) script 파일이 dom을 조작한다면 문제가 발생할 수 있다.
why🤔?
html 파싱중 script태그 만날경우 파싱을 멈추고 script의 다운 및 실행 후 html 파싱을 이어서 진행하므로 존재하지 않는 DOM요소에 접근하게 될 수 있음.
또한, script 파일이 크고 무거울 경우 파일을 다운로드 및 실행하는 HTML 파싱을 하단 만 상태를 보여주고 있으므로 ux에 안좋다.
2. <body/> 태그에 위치한다.
ex)
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
<script src="index.js"></script>
</body>
</html>장점) HTML 파싱 중단으로 인해 발생되는 문제는 해결.
단점) 사용자가 의미있는 컨텐츠를 보기 위해 js가 필수라면 HTML이 먼저 보여지는게 의미가 없어짐.
3. <head/> 위치하지만 async 옵션 추가한다.
ex)
<!DOCTYPE html>
<html lang="en">
<head>
...
<script async src="index.js"></script>
</head>
<body>
...
</body>
</html>async : script다운시에는 파싱하고 실행할 때만 html 파싱 잠시 중단.
장점) fetching(다운로드)시에도 병렬적으로 HTML paisng 되므로 1보단 속도 단축
단점) 결국 파싱 중 멈추긴하므로 dom조작 시 문제 발생할 수 있음. script 파일이 여러개일 경우 순서 상관없이 빨리 받는 파일 실행하므로 순서 영향 있는 경우 문제 발생
4. <head/> 위치하지만 defer 옵션 추가한다.
ex)
<!DOCTYPE html>
<html lang="en">
<head>
...
<script defer src="index.js"></script>
</head>
<body>
...
</body>
</html>defer : script다운은 HTML 파싱중에 받고, 실행은 HTML파싱 끝나고 함.
장점) 다운로드와 파싱이 병렬적이므로 속도는 body태그에 넣은것보다 빠르며, html 파싱 완료 후 실행되므로 dom 조작 시에 문제 발생 안함.
참고 🔖
[HTML] script 태그는 어디에 위치 해야 할까?
JS 삽입 위치에 대한 차이(head or body)
