(FrontEnd) html에서 js를 불러올 때의 옵션(async / defer)

leverest96·2023년 1월 9일
0

front

목록 보기
1/1
post-thumbnail

사전 지식
1. parsing html : html 분석하기
2. fetching js : js 가져오기
3. executing js : js 실행하기

1. head에 js script 삽입 (기본)

<!-- 1. head에 js script 삽입 -->
<script src="main.js"></script>
  1. 순서 : parsing html -> fetching js -> executing js -> parsing html
    • browser가 한 줄 한 줄 html을 분석하다가 태그를 만나면 분석을 멈추고 server로부터 js를 가져온 뒤 실행
  2. 내가 알던 방식
  3. 단점 : js가 크면 웹사이트를 보는 데 까지 많은 시간이 소요된다.

2. body 가장 아래에 js script 삽입

<!-- 2. body 가장 아래에 js script -->
<script src="main.js"></script>
  1. 순서 : parsing html -> fetching js -> executing js
    • browser가 html을 다 분석한 다음 js를 가져온 뒤 실행
    • js를 받기 전에도 사용자가 페이지를 볼 수 있다.
  2. 단점 : 웹사이트가 js에 굉장히 의존적이라면 사용자가 정상적인 사이트를 보기까지 시간이 오래 걸린다.
    • (ex) 서버에서 데이터를 받아와야하거나, DOM요소를 더 이쁘게 꾸며주거나...

3. head에 async 적용 후 js script 삽입

<!-- 3. head에 async script js -->
<script async src="a.js"></script>
<script async src="b.js"></script>
<script async src="c.js"></script>
  1. 순서 : parsing html -> parsing html, fetching js(동시) -> executing js -> parsing html
    • boolean 타입으로 기본값이 true
    • broswer가 html을 분석하다가 async를 만나면 js 병렬적으로(동시에) 가져온 뒤 다 가져오면 html 분석을 멈추고 js를 실행하고 그 다음 남은 html을 분석한다.
    • 실무에서 방문자 수 카운터나 광고 관련 스크립트같이 독립적인 스크립트에 혹은 실행 순서가 중요하지 않은 경우에 적용
  2. 장점 : js 다운로드 시간을 단축할 수 있다.
  3. 단점
    • html이 전부 분석되기 전에 js가 실행되기 때문에 js에서 가르키는 html요소가 없을 수 있다.
    • js를 실행할 때 html이 분석을 멈추기 때문에 여전히 시간이 더 걸릴 수 있다.
    • script 정의 순서와 상관없이 가져오는대로 js를 실행하기 때문에 (b, c가 a보다 빠를 수도 있다.) js가 순서대로 의존적이라면 오류 가능성이 있다.

4. head에 defer 적용 후 js script 삽입

<!-- 4. head에 defer script js -->
<script defer src="main.js"></script>
  1. 순서 : parsing html -> parsing html, fetching js(동시) -> executing js(html parsing이 끝난 후)
    • browser가 html을 분석하다가 defer를 만나면 js를 병렬적으로(동시에) 가져온 뒤 html 분석이 다 끝난 후에 js를 실행한다.
    • 실무에서 DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우에 적용한다.
  2. 장점 : fetching js도 동시에 하면서 페이지를 보여준 다음에 js를 executing 하기 때문에 가장 좋은 옵션이다.
    • async와 다르게 정의한 순서대로 js를 executing 한다. (a.js 실행 -> b.js 실행 -> c.js 실행)
  3. 단점
    • 스크립트가 실행되기 전 페이지가 화면에 출력되기 때문에 사용자가 그래픽 관련 컴포넌트들이 준비되지 않은 상태에서 화면을 보게 될 수 있다.
      • 따라서 지연 스크립트가 영향을 주는 영역엔 반드시 '로딩 인디케이터’가 있어야 하고 관련 버튼도 사용 불가(disabled) 처리를 해줘야 한다.
      • 이렇게 해야 사용자에게 현재 어떤 것은 사용할 수 있는지, 어떤 것은 사용할 수 없는지를 알려줄 수 있다.

https://laycoder.tistory.com/205

profile
응애 난 애기 개발자

0개의 댓글