📌 스크립트의 로드 시점 (async와 defer)
스크립트의 로드 시점을 알아보기 위해 먼저 이렇게 가정하였다. 👉 사진 출처
1. head 안에 script를 그냥 포함하는 경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="main.js"></script>
</head>
<body>
</body>
</html>
- 브라우저가 html을 한 줄씩 순서대로 파싱(parsing)함
- script 태그가 보이면 html 파싱을 멈추고 필요한 자바 스크립트 파일을 다운로드함
- 자바 스크립스를 실행한 다음에 나머지 html을 파싱
→ 단점: 사용자가 웹 사이트를 보는 데까지 많은 시간이 소요됨
→ 따라서 좋은 방법이 아님!
2. body의 끝 부분에 script를 포함하는 경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
<script src="main.js"></script>
</body>
</html>
- html을 차례대로 파싱해서 페이지가 모두 준비가 되면
- script를 만나 js를 받아오고(fetching)
- script가 준비가 되면 실행시킨다.
→ 장점: js를 받기 전에 사용자가 기본적인 html 콘텐츠를 빨리 볼 수 있음
→ 단점: 만약 웹사이트가 js에 의존적이라면, 사용자가 의미있는 정상적인 콘텐츠를 보기 위해서는 script를 받아오는 시간, 실행하는 시간을 기다려야 되는 단점이 있음
3. head 안에 script + async 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script async src="main.js"></script>
</head>
<body>
</body>
</html>
- 브라우저가 html을 파싱하다가 script의 async를 만나면
- 병렬로 js 파일을 다운로드 받자라고 명령만 해 놓고 다시 파싱
- 만약 js의 다운로드가 완료가 되면 파싱을 멈추고
- 다운로드 된 js 파일을 실행하게 됨
- js가 모두 실행 되면 다시 파싱을 진행시킴
→ 장점: js를 다운로드(fetching)하는 과정이 병렬로 일어나기 때문에 다운로드 받는 시간을 절약할 수 있음
→ 단점1: js가 html이 모두 파싱되기도 전에 실행되므로 만약 js file에서
특정 요소를 조작한다고 할 때, 조작하려는 시점에 해당 html에서 요소가 정의되어
있지 않을 수 있어서 위험함
→ 단점2: html을 파싱하는 동안 js 실행을 위해 언제든지 파싱을 멈출 수 있기 때문에 사용자가 페이지를 보는 데 시간이 걸리는 단점
→ 단점3: 정의된 js 순서와는 상관 없이 먼저 다운로드 된 순서대로 실행되기 때문에 만약 js가 순서에 의존적이라면 문제가 될 수 있음
4. head 안에 script + defer 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
- 브라우저가 html을 파싱하다가 script의 defer을 만나면
- 병렬로 js 파일을 다운로드 받자라고 명령만 해 놓고 다시 파싱
- 마지막에 파싱이 모두 끝나면 미리 다운받은 js를 실행함
→ 장점: 파싱하는 동안 필요한 js를 모두 다운 받고, 파싱이 완료된 후
다운 받은 js를 '순서대로' 실행함
→ 가장 효율적이고 안전한 방법!
열심히💨 (알고리즘 블로그)