[javascript] async vs defer

Yongwoo Cho·2022년 2월 2일

JavaScript TIL

async 속성

defer 속성

TIL

목록 보기

57/98

<script>를 <head>안에 작성

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="main.js"></script>
  </head>
  <body></body>
</html>

👎 html 문서 parsing중 script 태그를 만나면 parsing을 멈추고 script 태그안의 main.js파일을 불러오는 작업을 먼저 실행한다. 실행이 완료 된 후에 html 문서를 다시 parsing 한다. 따라서 사용자가 웹사이트를 보는데 걸리는 시간이 길어질 수 있고 main.js 파일은 로드되었지만 html을 아직 parsing 하지 않아 오류가 발생할 수 있다는 단점이 있다.

<script>를 <body>맨 뒤에 작성

<!DOCTYPE html>
<html lang="en">
  <head> </head>
  <body>
    <h1>Hello World!</h1>
    <script src="main.js"></script>
  </body>
</html>

👍 html 파일의 parsing이 완료된 후 main.js가 실행되기 때문에 js파일이 먼저 로드되어 발생하는 문제점이 생기지 않는다.

👎 하지만 대부분의 웹사이트에서는 js파일의 의존도가 높기 때문에 여전히 사용자가 기다려야되는 상황이 발생할 수 있다.

✨ 이러한 문제점을 해결하기 위해서 HTML5에서 script 태그의 속성인 async와 defer가 추가되었다.

async 속성

<!DOCTYPE html>
<html lang="en">
  <head>
    <script async src="main.js"></script>
  </head>
  <body></body>
</html>

✔ async속성을 이용하면 브라우저가 html을 parsing하다가 async를 만나게 되면 js파일이 실행하도록 명령만 해놓고 html parsing을 계속 진행한다. 그러다 js파일이 모두 load가 완료 되었을때 html parsing을 멈추고 js파일을 실행시킨다. 실행완료후 멈췄던 html parsing을 다시 진행시킨다.

👎 js파일이 순서에 의존하는 경우, js파일이 완료되는 대로 진행이 되기 때문에 순서가 보장되지 않는다.

defer 속성

<!DOCTYPE html>
<html lang="en">
  <head>
    <script defer src="main.js"></script>
  </head>
  <body></body>
</html>

✔ defer속성을 이용하면 html을 parsing하다가 js파일을 만나면 js파일이 실행할수 있도록 로드를 한다. html parsing은 계속 진행을 하고, 파싱이 완료가 되면 js파일을 순차적으로 실행시킨다.

👍 DOM 생성이 완료되었을 때 js파일이 순차적으로 실행되기 때문에 작성 순서가 유지된다.

Yongwoo Cho

Frontend 개발자입니다 😎

이전 포스트

[웹] CORS

다음 포스트

[javascript] repaint / reflow

0개의 댓글

관련 채용 정보

위메이드(WEMADE)

백엔드 개발(WEMIX PLAY)

위메이드는 게임과 블록체인 융합의 선두주자로, WEMIX3.0 메인넷 기반의 다양한 플랫폼 개발에 힘쓰고 있습니다. 백엔드 개발자로서 게임 플랫폼과 PG사 연동 시스템을 구축하며 혁신적인 팀의 일원이 되어보세요!

테크타카(ARGO)

Jr.Backend Engineer (Java / Spring)

테크타카에서 물류 자동화 플랫폼 ARGO를 개발하며, 데이터 효율성과 시스템 안정성을 위한 과제를 해결할 Jr. Backend Engineer를 찾습니다. Java와 Spring으로 유연한 시스템 디자인을 경험하고, 자율적 문화 속에서 역량을 마음껏 펼칠 기회를 제공합니다.

와드(캐치테이블)

B2B Back_End Developer (3~5년차)

캐치테이블은 외식업 전문 통합 플랫폼을 운영하며 디지털화를 선도하고 있습니다. 백엔드 개발자로 성장할 기회를 제공하며, Java, Spring을 활용한 혁신적인 서비스 개발을 지원합니다.