head에 포함
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="main.js"></script>
</head>-
Parsing HTML
브라우저가 순서대로 파싱하고 이해한 걸 CSS와 병합하여 DOM 요소로 변환 -
Fetching JS
스크립트 태그가 보이면 브라우저 파싱을 멈추고 JS 파일 다운로드 -
Executing JS
다운로드한 JS 파일 실행 -
Parsing HTML
JS 파일 실행 후 다시 브라우저 파싱
단점
JS 파일 용량이 크고 인터넷이 느리다면 페이지 로딩까지 많은 시간이 소요
body 끝 포함
<body>
<script src="main.js"></script>
</body>-
Parsing HTML
브라우저가 순서대로 파싱하고 페이지 준비 -
Fetching JS
JS 파일 다운로드 -
Executing JS
JS 파일 실행
장점
페이지가 JS 파일을 받기 전에 로딩이 되므로 사용자가 빠르게 페이지를 볼 수 있다
단점
DOM 요소의 조작이 많은 즉 JS 파일에 의존이 높다면 사용자가 의미 있는 컨텐츠를 볼 시까지 많은 시간이 소요
haed async
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script async src="main.js"></script>
</head>- Parsing HTML + Fetching JS + Executing JS
브라우저가 순서대로 파싱 async을 만나면 병렬로 JS 파일 다운로드 후 다시 파싱 JS 파일 다운로드 완료되면 실행 후 나머지 HTML 파싱
장점
JS 파일 다운로드가 병렬로 이루어지기에 다운로드하는 시간 절약 가능
단점
- JS 파일이 HTML 파일 파싱 완료 전 실행되기에 DOM 조작 시점에
HTML 요소가 정의되어 있지 않을 수 있음
- 여러 개의 JS 파일 다운로드 시 먼저 완료된 순서대로 실행
순서가 정해 저 있는 JS 파일이라면 문제 발생
head defer
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script defer src="main.js"></script>
</head>- Parsing HTML + Fetching JS + Executing JS
브라우저가 파싱을 하다 defer를 만나면 JS 파일을 다운로드 명령만 실행 후 나머지 HTML 파싱 파싱 종료 후 다운로드 완료된 JS 파일 실행
장점
- HTML 파싱을 먼저 하여 사용자에게 페이지를 보여준 다음 JS 파일 실행하기에 페이지 로딩 시간 절약 가능
- 정해진 순서대로 JS 파일 실행
