javascript_async vs defer

권효정·2021년 3월 7일

html에 javascript를 추가하는 방법

<html>
 <head>
  <script src = "main.js"></script>
 </head>
 <body></body>
<html>

parsing html → fetching js → executing js → parsing html

js파일이 크다면 웹사이트를 보는데 시간 소요가 많다.

 <html>
  <head></head>
  <body>
   <script src = "main.js"></script>
  </body>
<html>

parsing html → fetching js → executing js

기본적인 html을 빨리 볼 수 있지만 사이트에서 js의 비중이 크다면 js를 받아오는데 시간이 많이 소요되어서 좋지 않다.

<html>
  <head>
   <script asyn src = "main.js"></script>
  </head>
  <body>
    <div></div>
  </body>
<html>

parsing html & fetching js → executing js → parsing html

다운받는 시간은 적지만 js가 html이 pasrsing되기 전에 실행되기때문에 위험할 수도 있고 page를 보는데 시간도 오래 걸린다.

4. head에 script를 포함하되 defer 속성값을 추가(제일 좋은 방법)

<html>
  <head>
   <script defer src = "main.js"></script>
  </head>
  <body>
    <div></div>
  </body>
<html>

parsing html & fetching js → executing js

html parsing을 먼저하여 사용자에게 페이지를 먼저 보여주고 js를 실행한다

async 와 defer 의 차이점

async : 정의된 script 순서와는 상관없이 다운로드가 먼저된 것을 실행하기 때문에 js파일들이 순서가 중요하다면안 좋다

defer : parsing하는동안 js 파일을 다운받은 후 순서대로 실행된다.

결론 : head안에 defer옵션을 추가하는 것이 제일 효율적이고 안전하다.

권효정

코딩 공부를 하고있는 학생입니다