head 태그 내 script를 삽입하는 경우
1. head
<head>
<script src="test.js"></script>
</head>HTML parsing을 중간에 중단하고 js파일을 읽어온 후 다시 HTML을 parsing한다.
- 장점 : js파일을 가장 먼저 실행시킬 수 있다.
- 단점 : JS파일 크기가 큰 경우 속도가 느려진다.
2. head + async
<head>
<script asyn src="test.js"></script>
</head>HTML parsing과 fetching js가 병렬로 이루어진다. js파일 다운이 완료되면 HTML parsing을 중단하고 js파일을 실행시킨 뒤 남은 HTML을 parsing한다.
- 장점 : 병렬진행으로 fetching시간이 절약된다.
- 단점 : js에 필요한 HTML 요소가 정의되기 전에 js가 먼저 실행될 위험이 있다.
다수의 script가 존재할 때코드 순서와 상관없이 다운이 완료된 순으로 js파일이 실행되므로 순서에 의존적인 js코드인 경우 문제가 될 수 있다.
3. head + defer
<head>
<script defer src="test.js"></script>
</head>HTML parsing과 fetching js가 병렬 진행되며 HTML parsing완료 후에 js파일을 실행한다.
- 장점 : HTML을 사용자에게 보여준 뒤 js를 실행한다.
async와 defer
- async : HTML parsing과 js fetching이 병렬로 동시에 이루어짐. fetching이 완료되면 parsing을 중단하고 js실행함.
- defer : HTML parsing과 js fetching이 병렬로 동시에 이루어짐. parsing이 완료되면 js를 실행함.
body 태그 내 script 삽입하는 경우
body
<body>
<script src="test.js"></script>
</body>HTML parsing이 완료된 후 js파일을 읽어온다.
- 장점 : 기본적인 HTML 콘텐츠는 빠르게 볼 수 있다.
- 단점 : js에 의존적인 콘텐츠라면 HTML만 먼저 보이는 것은 큰 의미가 없다.
load관련 JS 이벤트
1. DOMContentLoaded
<body>
<script>
window.addEventListener("DOMContentLoaded", () => {});
</script>
</body>document 로드 후 호출
2. load
<body>
<script>
window.addEventListener("load", () => {});
</script>
</body>resources(css, images) 로드 후 호출
3. beforeunload
<body>
<script>
window.addEventListener("beforeunload", () => {});
</script>
</body>unload 전에 호출
4. unload
<body>
<script>
window.addEventListener("unload", () => {});
</script>
</body>resources가 전부 unload되었을 때 호출
참고자료
드림코딩 강의
모던 자바스크립트 튜토리얼 https://ko.javascript.info/script-async-defer
안 되는 이유보다 가능한 방법을 찾을래요