html에서 script 태그를 로드하는 방법에는 크게 4개가 있다.
이번 포스팅에는 각각의 방법과 그 방법에 따라 script가 어떻게 불러와지는지 정리하고자 한다.
- header태그 안에 작성
- body 태그 끝에 작성
- async 키워드 사용
- defer 키워드 사용
header 태그 안에 작성
html 태그 중, header 태그 안에 script 태그를 작성하는 방법이다.
script 태그를 불러오는 과정은 아래와 같다.
- HTML 파싱을 진행
- HTML header에서 script 태그를 만남
- HTML 파싱을 중단
- script 로드 후 실행
- HTML 파싱 재개
빠르게 script를 불러올 수 있다는 장점이 있으나,
script를 로드하고 실행한 뒤에 다시 html을 파싱 하므로 로딩시간이 길어지거나, 화면에 빈 부분이 생길 수 있다는 단점이 있다.
<html>
<head>
<script src="app.js"></script>
</head>
<body>
<p>Example text</p>
</body>
</html>
body 태그 안에 작성
html 태그 중, body 태그 안, 맨 뒷 부분에 script 태그를 작성하는 방법이다.
script 태그를 불러오는 과정은 아래와 같다.
- HTML 파싱 종료
- HTML body 맨 끝에서 script 태그를 만남
- script 로드 후 실행
html 파싱을 완료한 이후, script 태그를 로드하기에 페이지가 빨리 로드된다는 장점이 있다.
단 스크립트가 맨 마지막에 로드되기에, 빨리 실행해야하는 스크립트는 해당 방법이 부적절할 수 있다.
<html>
<head>
</head>
<body>
<p>Example text</p>
<script src="app.js"></script>
</body>
</html>
async 키워드 사용
html 태그 중, header 태그 안에 script 태그를 작성하고, 그 뒤에 async 키워드를 사용하는 방법이다.
script 태그를 불러오는 과정은 아래와 같다.
- HTML 파싱과 script를 동시에 로딩
- script 로딩이 종료되면 html 파싱을 잠시 멈추고, script 실행
- script 실행 완료 후 html 파싱 마무리
스크립트를 html 파싱과 동시에 진행하므로 로딩과 실행이 빠르다는 장점이 있지만,
스크립트가 여러 개일 경우 어떤 스크립트가 먼저 실행될지, 그 순서가 보장되지 않는다는 단점이 있다.
순서를 보장하고 싶다면, promise를 사용하거나, 스크립트 순서를 직접적으로 관리해야 한다.
<html>
<head>
<script src="app.js" async></script>
</head>
<body>
<p>Example text</p>
</body>
</html>
defer 키워드 사용
html 태그 중, header 태그 안에 script 태그를 작성하고, 그 뒤에 defer 키워드를 사용하는 방법이다.
script 태그를 불러오는 과정은 아래와 같다.
html파싱과 script 로딩을 동시에 진행한다는 점에서 async와 비슷하지만,
async는 script 로딩이 끝나자마자 script를 실행하는 것과 달리, defer은 html 파싱이 종료되고 나서 실행한다.
- HTML 파싱과 script를 동시에 로딩
- html 파싱이 끝나면 script 실행
스크립트를 html 파싱이 종료된 이후에 실행되기에 DOM조작에 유리하다는 장점이 있다.
다만 html 파싱이 종료된 후에 스크립트가 실행되므로 실행 순서가 지연된다는 단점이 있다.
<html>
<head>
<script src="app.js" defer></script>
</head>
<body>
<p>Example text</p>
</body>
</html>
요약
각각의 방법을 확인하면, html 파싱과 script 로딩과 실행 순서에 조금씩 차이가 있음을 알 수 있다.
빠르게 실행해야하는 script라면 async 키워드를 사용하고,
DOM을 다루어야 하는 script라면 defer 키워드를 사용하는 것이 좋겠다.
