[javascript] async와 defer의 차이점

yeo_oni·2021년 11월 3일
0

자바스크립트

목록 보기
1/3

🤔 html에서 javascript를 포함할 때 효율적인 방법을 살펴보자!


1. head안에 추가하는 경우

이 경우에는 html이 파싱하다가 script를 만났을 때 자바스크립트 파일을 서버에서 다운로드하게 된다.

<head>
  <script src=""></script>
</head>

자바스크립트 파일이 클 경우에 사용자가 웹 사이트를 보는데 많은 시간이 소요되는 단점 발생


2. body 끝 부분에 추가하는 경우

이 경우에는 html 파싱이 끝난 후 자바스크립트 파일을 서버에서 다운로드 한다.

<head>
</head>

<body>
  <script src=""></script>
</body>

기본적인 html을 사용자가 빨리 볼 수 있다는 장점은 있지만 만약 자바스크립트의 의존도가 높은 html이라면 문제가 발생하게 된다.


3. head 안에 asyn 옵션을 사용해 추가하는 경우

html을 파싱하다가 script를 만나면 다운로드하자는 명령을 주고 파싱과 다운로드가 병렬로 실행된다. 그리고 난 후 자바스크립트 다운로드가 끝나면 자바스크립트를 실행한다.

<head>
  <script asyn src=""></script>
</head>

다운로드 받는 시간을 절약할 수 있지만 자바스크립트가 html 파싱이 완료되기 전에 실행되기 때문에 필요한 DOM요소가 아직 파싱되기 전이라면 문제가 발생할 수 있다.


4. head 안에 defer 옵션을 사용해 추가하는 경우 (👍🏻)

html 파싱을 진행하다 script를 만나면 다운로드 받자는 명령만 시켜놓은 다음 나머지 html 파싱을 마무리 짓고 마지막에 script를 실행한다.

<head>
  <script defer src=""></script>
</head>

제일 효율적이고 안전하다!

0개의 댓글