뭐든 즐기면서 ;)

Javascript html내 선언하는 방법 4가지(async&defer) 본문

FRONT/Javascript

Javascript html내 선언하는 방법 4가지(async&defer)

Tada.*+ 2022. 12. 15. 15:34
728x90

브라우저가 html을 분석하는 단계 구분

  • html 분석(parsing)
  • css/html 병합
  • js 다운로드
  • 다운로드된 js 실행

JS <script> 선언 방법

1. head에 선언

<html>
  <head>
    <meta charset="UTF-8"/>
    <title>이야아아</title>
    <script src="main.js"></script>
  </head>
  <body></body>
</html>

브라우저가 html을 분석하는 순서 : html 다운로드 > 브라우저가 html을 한 줄 씩 분석(parsing) > '<script>'를 만났을 때, html parsing을 멈추고 js를 다운로드 & 실행 > 다시 html parsing 진행 > parsing 완료 > 사용자에게 노출

 

단점 : js 사이즈가 크다면 사용자가 web사이트를 보는 데까지 시간이 오래 걸림.

 

2. body 최하단에 선언

<html>
  <head>
    <meta charset="UTF-8"/>
    <title>이야아아</title>
  </head>
  <body>
    ...
    <script src="main.js"></script>
  </body>
</html>

분석 순서 : html 다운로드 > parsing > parsing(css+html병합까지)완료 > 사용자 노출 > js 다운로드&실행

 

장점 : js파일을 다운로드 하기 전에 이미 html이 사용자에게 보여질 수 있음.

단점 : js에 의존적인 APP이라면, 의미있는 컨텐츠를 보기 위해서는 결국, js를 다운로드&실행하는 시간까지 기다려야 함.

 

3. async

<html>
  <head>
    <meta charset="UTF-8"/>
    <title>이야아아</title>
    <script async src="main.js"></script>
  </head>
  <body></body>
</html>

분석 순서 : html 다운로드 > parsing > '<script>'태그 만남 > js 다운로드 요청 > 다운로드 완료 >> js실행 > parsing 재진행

                                                          > parsing 계속 진행 >>>>>>>>>>>>>>>>>>>>>>>>>>↗

 

장점 : js 다운로드가 병렬적으로 이루어지기 때문에 모든 단계완료 시간이 줄어듬.

단점 : js 다운로드가 html parsing보다 일찍 끝나게 될 때, js 파일 내에서 html dom요소를 조작하려 하는 부분이 있다면 해당 dom요소를 찾을 수 없다는 오류를 야기시킴.

 

4. defer

<html>
  <head>
    <meta charset="UTF-8"/>
    <title>이야아아</title>
    <script defer src="main.js"></script>
  </head>
  <body></body>
</html>

분석 순서 : html 다운로드 > parsing > '<script>'태그 만남 > js 다운로드 요청 >  js 다운로드 진행 & html parsing 진행 > parsing 완료 후 다운로드 완료 된 js들 실행

html을 parsing하는 동안 js 파일을 다운로드 하고, html parsing이 모두 완료되면 다운로드 되어진 js를 실행

 

async와 defer 차이점

async : 다수의 js 파일 a.js, b.js, c.js <script>태그가 있다면 선언되어진 순서와 상관없이 먼저 다운로드 완료된 js가 실행되어짐. 서로 의존적인 js라면 오류가 발생하게 됨.

defer : html을 parsing하는 동안 a,b,c.js가 다운로드 되고, parsing이 완료되었을 때 다운 완료된 js를 선언한 순서대로 실행함.

728x90

'FRONT > Javascript' 카테고리의 다른 글

javascript Function(함수)  (0) 2022.12.16
Javascript data type  (1) 2022.12.15
js 단축키 적용 / javascript 단축키 적용  (0) 2022.09.22
Javascript prototype  (0) 2022.06.27
javascript var let const  (0) 2021.11.30
'FRONT/Javascript' Related Articles more
Comments