들어가며

— 브라우저는 한줄씩 읽으면서 분석하고 파싱한다.

— script tag에 async, defer 속성을 부여할 수 있다. (이 속성에 대한 default 값은 true이다.)

Untitled

`<script>`

script 태그가 무엇인지 먼저 정의해보자.

HTML 파일은 script 태그가 등잘할때까지 파싱한다. 그리고 script 태그를 만나면 HTML 파싱이 중단되고 즉시 스크립트를 다운로드 받고, 다운로드 스크립트가 실행된 후에 파싱이 재개된다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
		<script src="main.js">
  </head>
  <body>
  </body>
</html>

이런 식으로 만약 스크립트를 헤더에(위쪽에) 올리면 스크립트를 돔을 파싱하기 전에 스크립트 파일을 서버에서 다운로드 받아온다.

→ 다운로드 시간 지연으로 인해 화면을 보는데 오랜 시간을 소요하게 된다.
- 이를 보안하기 위해 일반적으로 body 마지막 태그로 작성한다.

`<script async>`

HTML 파싱과 스크립트 다운로드가 병렬적으로 일어난다.
스크립트 다운로드 시간을 절약할 수 있다.
스크립트 다운로드 후에 스크립트 실행이 일어난다.
- 스크립트가 실행되는 동안(excution)하는 동안은 html 파싱이 멈춘다.(회색 블록 확인)