[TIL / JavaScript] defer, async 스크립트

9299 단어 TILJavaScriptJavaScript

[JavaScript] defer, async 스크립트

  • 브라우저는 HTML을 읽다가 script 태그를 만나면 스크립트를 먼저 실행해야 하므로 랜더링을 멈춘다.
  • 일반적으로 script는 HTML의 head 요소 안에 작성한다. → 외부로부터 불러오는 리소스 파일을 한 군데에서 관리할 수 있는 장점이 있다.
<!doctype html>
<html>
  <title>title</title>
  <link href="stylesheet.css" rel="stylesheet" type="text/css">
  <script scr="script.js"></script>
  <body>
    ...
  </body>
</html>
  • 브라우저는 script마다 파싱을 중지하고 스크립트를 로드, 실행하게 된다. → 외부 스크립트를 로드하는 네트워크 왕복 시간, 자바스크립트를 실행하는 시간만큼 렌더링이 지연된다.

  • 스크립트가 렌더링을 막지 않도록 body의 맨 아래에 삽입할 수 있다.
<!doctype html>
<html>
  <title>title</title>
  <link href="stylesheet.css" rel="stylesheet" type="text/css">
  <body>
    ...
    <script scr="script.js"></script>
  </body>
</html>
  • 렌더링이 먼저 진행되고 스크립트를 로드하기 때문에 스크립트에 의존적인 페이지라면 정상적인 사용까지 시간이 지연될 수 있다.

defer

<body>
  ...
  <script defer src="script.js"></script>
  ...
</body>
  • 지연 스크립트는 백그라운드에서 다운로드하기 때문에 HTML 파싱을 막지 않고, 페이지 구성이 끝났을 때 실행된다.

  • 일반 스크립트와 마찬가지로 HTML에 추가된 순서로 실행된다. → 길이가 긴 스크립트가 앞에, 길이가 짧은 스크립트가 뒤에 있어도 짧은 스크립트는 긴 스크립트가 실행될 때까지 기다린다.
  • 스크립트가 실행되기 전에, 페이지가 화면에 출력되기 때문에 컴포넌트들이 준비되지 않은 상태에서 사용자가 화면을 볼 수 있다. → 지연 스크립트가 영향을 주는 영역에는 로딩 인디케이터가 필요하다.
  • defer 속성은 외부 스크립트에만 유효하다.
  • 일부 브라우저에서는 defer 속성을 지원하지 않는다.

async

<body>
  ...
  <script async src="script.js"></script>
  ...
</body>
  • defer와 마찬가지로 백그라운드에서 다운로드하기 때문에 HTML 파싱을 막지 않지만 다운로드가 완료되면 즉시 실행하고, 실행되는 동안 브라우저는 HTML 파싱을 멈춘다.

  • DOMContentLoaded 이벤트와 비동기 스크립트는 서로를 기다리지 않는다. → 먼저 끝나는대로 실행된다.(load-first order)
  • DOM을 조작하지 않으며 앞뒤에 로드되고 실행될 스크립트와 의존성이 없는 코드만 포함하는 것이 좋다.
  • 방문자 수 카운터나 광고 관련 스크립트처럼 각각 독립적인 역할을 하는 서드파티 스크립트를 현재 개발 중인 스크립트에 통합하려 할 때 유용하다.
  • 일부 브라우저에서는 async 속성을 지원하지 않는다.

P.S.

HTML에서 스크립트가 로딩되고 실행되어야 하는 시점을 잘 파악하여 적절한 위치에 사용하는 것이 중요하다는 것을 깨달았다😄 프로젝트를 해보려 했지만, 그에 앞서 자바스크립트와 웹이 어떻게 상호작용하는지에 대해 추가로 공부가 필요하다는 것을 알게 되었다. 조급해하지 말고 차근차근 배워보자😇

참고 문서

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 14회차 미션
servlet - getRealPath, getContextPath

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage