async, defer

티스토리 뷰

JavaScript

fromslow 2021. 6. 23. 16:42

HTML head 태그 안에 자바스크립트 파일을 임포트 했을 때,

어떤 속성이냐에 따라 다운로드, 실행되는 방법이 달라진다.

1. 속성이 없는 경우

1
2
3

<head>
    <script src="./app.js"></script>
</head>

cs

html을 파싱하다가 script를 만나면 html 파싱을 중단하고 우선 script 파일을 다운로드한 후 실행을 한다.
이어서 나머지 html를 파싱한다.

script를 실행하는 구간에서 html 파싱이 잠시 멈추게 되어 시간이 걸린다.

2. async

1
2
3

<head>
    <script src="./app.js" async></script>
</head>
Colored by Color Scripter

cs

async 속성은 html을 파싱하다가 script 파일을 만나면 html과 script가 병렬적으로 동시에 다운로드 되고,
다운로드가 빨리 끝난 script 파일부터 실행하게 된다.

script 파일이 실행이 되는 구간에는 html 파싱이 멈춘다.
이후 나머지 html을 파싱한다.

3. defer

1
2
3

<head>
    <script src="./app.js" defer></script>
</head>
Colored by Color Scripter

cs

defer 속성은 html을 파싱하다가 script 파일을 만나면 html과 script가 병렬적으로 동시에 다운로드 된다.

(여기까지는 async와 동일)

그런데 이 script 파일을 실행하는 것은 html 파싱이 모두 끝난 후에 순차적으로 실행된다.
그래서 html 파싱이 중단되는 부분이 없다.

이미지 출처 및 참고사이트

async vs defer attributes

The async and defer attributes for the

Intersection Observer (0)	2021.05.20
이벤트(Event) (0)	2020.11.30
렌더링 순서(Critical Rendering Path) (0)	2020.11.30
CSSOM(CSS Object Model) (0)	2020.11.30
DOM(Document Object Model) (0)	2020.11.29

공지사항

최근에 올라온 글

최근에 달린 댓글

링크

글 보관함