TIL 21 | JS와 문서의 로드 시점 async, defer

Gom·2021년 2월 2일
0

JavaScript

목록 보기
11/22
post-thumbnail

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

profile
안 되는 이유보다 가능한 방법을 찾을래요

0개의 댓글