async 및 defer 속성
HTML 분석을 차단하지 않고 스크립트 로드하기
async 및 defer 속성은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
기본 스크립트 동작
async나 defer가 없는 일반적인 <script src="...">는 다운로드되고 실행되는 동안 HTML 파싱을 차단합니다. 스크립트 아래에 있는 모든 내용의 렌더링이 일시 중지되므로, 전통적으로 스크립트는 <body>의 맨 아래에 배치했습니다.
async는 병렬로 다운로드함
<script async src="...">는 HTML 파싱과 동시에 스크립트를 병렬로 다운로드하고, 도착하는 즉시 실행합니다. 실행 중에는 HTML 파싱이 여전히 일시 중지되지만 그 시간은 짧으며, 스크립트가 다른 리소스의 다운로드를 차단하지는 않습니다.
async의 실행 순서는 예측할 수 없음
두 async 스크립트는 다운로드가 먼저 끝나는 순서대로 실행됩니다. 서로 의존하는 스크립트에는 async를 사용하지 마십시오(jQuery가 jQuery 플러그인보다 먼저 로드되어야 하는 경우 등). 필수 스크립트가 준비되기 전에 의존 스크립트가 실행될 수 있기 때문입니다.
defer는 HTML을 기다림
<script defer src="...">는 async처럼 병렬로 다운로드하지만, HTML 파싱이 완전히 끝난 뒤, 즉 DOMContentLoaded 이벤트 직전에 실행됩니다. 이 스크립트는 파싱을 차단하지 않습니다.
<script defer src="app.js"></script>
<script defer src="analytics.js"></script>defer는 순서를 유지함
여러 defer 스크립트는 body 끝에 있는 일반 스크립트처럼 선언된 순서대로 실행됩니다. 따라서 의존하는 스크립트에는 defer가 적합합니다. 별도의 조정 없이 유틸리티가 사용하는 쪽보다 먼저 로드됩니다.
async와 defer 중 선택하기
DOM을 건드리지 않고 의존성도 없는 독립적인 서드파티 코드(분석 도구, 광고)에는 async를 사용하십시오. DOM이 필요하고 다른 스크립트에 의존하는 자체 애플리케이션 코드에는 defer를 사용하십시오.
모듈은 기본적으로 지연됨
<script type="module">은 자동으로 defer처럼 동작합니다. 병렬로 다운로드하고, 파싱이 끝난 뒤 실행하며, 순서를 유지합니다. 모듈에 defer를 추가하는 것은 허용되지만 중복이며, async를 추가하면 다시 async 동작을 사용하게 됩니다.
인라인 스크립트는 async/defer를 무시함
async와 defer는 외부 스크립트(src가 있는 스크립트)에만 적용됩니다. 인라인 <script> 태그는 속성과 관계없이 즉시 실행되므로, <script>console.log(1)</script>에서는 해당 속성이 조용히 무시됩니다.
배치의 중요성이 줄어듦
defer(또는 모듈)를 사용하면 <script> 태그를 파싱을 차단하지 않고 <head> 안에 둘 수 있습니다. 또한 이 위치에 배치하면 <body>의 맨 아래에 둘 때보다 브라우저가 더 일찍 발견하고 다운로드를 시작할 수 있습니다.
<head>
<script defer src="app.js"></script>
</head>preload와 함께 사용하기
지연 시간에 민감한 스크립트에는 head의 <link rel="preload" as="script" href="...">와 아래쪽의 지연된 <script>를 함께 사용하십시오. preload는 즉시 다운로드를 시작하고, defer는 실행 순서가 올바르게 유지되도록 합니다.
흔한 함정
스크립트에 의존성이 전혀 없는지 확인하지 않고 async를 지정하는 것은 "내 컴퓨터에서는 작동하지만 프로덕션에서는 깨지는" 경쟁 상태의 가장 흔한 원인입니다. 확실하지 않다면 defer를 우선 사용하십시오. async가 가혹하게 실패하는 상황에서도 defer는 문제를 잘 흡수합니다.
지식 확인
두 번째 스크립트가 첫 번째 스크립트에 의존할 때 async와 defer는 어떻게 다른가요?
요약
async와 defer는 모두 HTML 파싱과 동시에 스크립트를 병렬로 다운로드합니다. async는 도착하는 즉시 예측할 수 없는 순서로 실행되므로 독립적인 서드파티 코드에 사용하십시오. defer는 파싱이 끝난 뒤 선언된 순서대로 실행되므로 의존성이 있는 애플리케이션 코드에 사용하십시오. 모듈은 기본적으로 defer 방식으로 동작합니다.
자주 묻는 질문
“async 및 defer 속성” 강의는 무료인가요?
네 — “async 및 defer 속성” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“async 및 defer 속성”에서 뭘 배우나요?
HTML 분석을 차단하지 않고 스크립트 로드하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“async 및 defer 속성” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.