그알것 — 그럼에도 알아야 할 것들
홈질문커뮤니티
로그인
그알것 — 그럼에도 알아야 할 것들

Service

  • 홈
  • 소개
  • 질문
  • 커뮤니티

My

  • 내 워크스페이스
  • 저장한 질문
  • 작성한 답변

Policy

  • 이용약관
  • 개인정보처리방침
  • 문의

© 2026 그알것 · What Still Matters

질문 목록Browser
Browser

script 태그에서 async와 defer의 차이점에 대해서 설명해주세요

실무4/5
설계4/5
인간3/5
기초3/5

면접관의 질문 의도

두 속성을 "비동기" 정도로 묶어 아는지, 실행 시점·순서 보장 차이까지 잡고 _상황별 선택 기준_을 말할 수 있는 사람인지를 가른다.

큐레이션 답변

학습 자료

async와 defer는 스크립트를 HTML 파싱과 _병렬로 다운로드_한다는 공통점이 있다. async는 다운로드가 끝나는 순간 즉시 실행되어 문서 작성 순서를 보장하지 않고 실행 중 파싱이 잠시 멈춘다. defer는 문서 파싱이 끝난 뒤 DOMContentLoaded 직전에 문서에 적힌 순서대로 실행된다. 그래서 분석·광고처럼 다른 스크립트에 영향이 적은 코드는 async, 순서·의존성이 있는 메인 앱 번들은 defer가 일반적이다.

좋은 답변 구조

  1. 01async·defer 모두 병렬 다운로드라는 공통점부터 정리한다
  2. 02실행 시점(즉시 실행 vs 파싱 종료 후)·순서 보장(없음 vs 문서 순서)을 차이 축으로 설명한다
  3. 03독립 스크립트는 async, 순서 의존 앱 번들은 defer 같은 선택 기준을 짚는다
  4. 04광고·분석·메인 번들이 섞인 페이지에서의 실무 적용 예시로 마무리한다

자주 실수하는 포인트

async와 defer를 "둘 다 비동기" 정도로 동일시한다
여러 async 스크립트의 실행 순서가 보장된다고 오해한다
초기화 순서 의존 스크립트에 async를 붙여 "가끔 동작하지 않는" 버그를 만든다
module 타입 스크립트가 기본적으로 defer 동작이라는 사실을 모른다

실무 맥락

  • 광고·분석·앱 번들이 같은 페이지에 섞여 로드되는 마케팅/콘텐츠 페이지
  • DOMContentLoaded 직전에 메인 앱이 초기화돼야 하는 SPA 부트스트랩
  • 초기 렌더 차단을 줄여 LCP를 개선해야 하는 성능 작업

본인 경험에 녹이는 힌트

async 스크립트가 메인 번들보다 먼저 떠서 전역 변수가 비어 있던 버그를 만난 적이 있다면 그 케이스를 그대로 답변 후크로 쓸 수 있다

서드파티 분석/광고 스크립트를 async로 격리해 렌더 차단을 줄인 경험이 있다면 선택 기준으로 연결할 수 있다

module 스크립트로 갈아끼우며 defer 동작을 활용한 경험이 있다면 자연스럽게 깊이 있는 답이 된다

커뮤니티 인기 답변

전체 0개

아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.

관련 꼬리 질문

Q1module 스크립트에서는 async/defer가 어떻게 동작하나요
Q2DOMContentLoaded와 defer 실행 순서는 어떻게 연결되나요
Q3크리티컬 인라인 스크립트와의 조합은 어떻게 설계하나요
아직 답을 쓰지 않았어요.
큐레이션 답변과 다른 사람 답변을 보고, 자기 언어로 답을 정리해보면 학습 효과가 가장 큽니다.
목차
  • 01면접관의 질문 의도
  • 02큐레이션 답변
  • 03좋은 답변 구조
  • 04자주 실수하는 포인트
  • 05실무 맥락
  • 06본인 경험에 녹이는 힌트
  • 07커뮤니티 인기 답변준비중
  • 08관련 꼬리 질문