스크립트 로드 방식 시뮬레이션과 async defer 실행 시점 차이
HTML 파싱과 스크립트 다운로드 및 실행 단계를 비주얼하게 렌더링해 주는 실시간 시뮬레이션을 가동해 스크립트 로딩 속도의 본질적인 차이를 체험해 보세요.
웹페이지 성능을 최적화하고 Largest Contentful Paint(LCP) 같은 웹 핵심 지표(Core Web Vitals)를 개선할 때 자바스크립트 스크립트 파일을 브라우저가 읽고 실행하는 방식을 통제하는 것만큼 효율적인 접근법은 없습니다.
HTML 문서의 파싱(Parsing) 흐름과 외부 JS 파일의 다운로드(Download) 및 실행(Execution) 시점을 제어하는 세 가지 대표적인 옵션인 기본(Default), async, defer 속성은 페이지 렌더링 블로킹(Blocking) 여부를 가르는 결정적 차이를 가집니다. 본 글에서는 각 로드 방식의 실행 메커니즘을 상세히 대조하여 해설합니다.
1. 스크립트 로드 방식별 타임라인 제어 메커니즘
브라우저가 HTML 코드를 파싱해 내려가다가 <script> 태그를 만나면 다음과 같이 속성에 따라 3가지 패턴으로 시간선(Timeline)이 분기됩니다:
[ \text{Parsing Thread State} = f(\text{Script Attributes: } [\text{Normal}, \text{Async}, \text{Defer}]) ]
① 일반 스크립트 (<script src="app.js">)
HTML 파싱을 즉시 멈추고(Parser Block), 자바스크립트 파일을 네트워크에서 다운로드한 후 즉시 코드를 실행합니다. 실행이 완전히 끝나야 멈췄던 HTML 파싱을 재개하므로, 스크립트 크기가 크거나 네트워크가 느리면 화면이 늦게 뜨는 병목이 발생합니다.
② Async 스크립트 (<script async src="app.js">)
HTML 파싱과 동시에 병렬적으로 스크립트 다운로드를 진행합니다. 단, 다운로드가 완료되는 즉시 HTML 파싱을 멈추고 자바스크립트를 실행합니다. 실행이 끝나야 HTML 파싱이 마저 돌아가므로, 스크립트 로드 순서가 다운로드 완료 순서대로 무작위화되어 의존성이 얽힌 대형 프로젝트에서는 깨질 위험이 큽니다.
③ Defer 스크립트 (<script defer src="app.js">)
HTML 파싱과 동시에 다운로드를 수행하지만, **자바스크립트의 실행은 HTML 파싱이 100% 끝나 DOM 트리 구성이 완료된 시점(DOMContentLoaded 직전)**까지 미뤄(Defer)둡니다. HTML 렌더링에 전혀 방해를 주지 않으며, 코드에 적힌 순서대로 안전하게 차례대로 실행되므로 가장 권장되는 브라우저 로딩 모델입니다.
2. 로드 옵션 한눈에 대조하는 타임라인 비교표
세 옵션의 브라우저 상태를 요약 대조하면 다음과 같습니다:
| 속성 | 다운로드 시점 (Download) | 실행 시점 (Execution) | 파서 중단 여부 (Parser Blocking) | 실행 순서 보장 여부 |
|---|---|---|---|---|
| Normal | 파싱 도중 중단 후 다운로드 | 다운로드 직후 즉시 실행 | 있음 (다운로드 + 실행 모두 블로킹) | 마크업 순서대로 보장 |
| Async | 파싱과 병렬로 다운로드 | 다운로드 직후 즉시 실행 | 일부 있음 (실행 시점에만 블로킹) | 다운로드 완료 순 (비순차적) |
| Defer | 파싱과 병렬로 다운로드 | HTML 파싱 완료 후 실행 | 없음 (완전 넌블로킹) | 마크업 순서대로 안전 보장 |
[!NOTE] 매번 텍스트나 표로만 실행 시점의 차이를 상상하며 헷갈릴 필요 없이, 스크립트 로드 방식 시뮬레이터 도구를 활용하면 가상 웹 렌더링 상태에서의 Normal, Async, Defer 스크립트가 로딩 속도와 실행 순서에 맞춰 어떻게 DOM 파싱 스레드를 가로막고 렌더링하는지를 비주얼한 애니메이션 타임라인 바 형태로 실시간 체험하며 직관적으로 이해할 수 있습니다.
HTML 파싱과 스크립트 다운로드 및 실행 단계를 비주얼하게 렌더링해 주는 실시간 시뮬레이션을 가동해 스크립트 로딩 속도의 본질적인 차이를 체험해 보세요.
3. 모던 프론트엔드 최적화를 위한 실무 가이드
- 상호 독립적인 서드파티 스크립트는 async 활용:
구글 애널리틱스(GA4), 광고 픽셀, 혹은 사용자 히트맵 분석 도구처럼 페이지의 핵심 DOM 구조를 건드리지 않고 개별 동작하는 독립적 통계 수집용 JS 파일은
async속성으로 로드하여, 로드가 조금 지연되더라도 다른 스크립트 실행에 간섭 없이 병렬로 통계를 올리는 것이 페이지 가벼움 유지에 이상적입니다. - jQuery나 React 등 코어 뼈대 파일은 defer 활용:
하위 비즈니스 로직 스크립트가 상위 공통 프레임워크 라이브러리에 전적으로 의존하는 경우, 실행 순서가 깨지면
Uncaught ReferenceError: $ is not defined와 같은 자바스크립트 크래시를 유발합니다. 반드시defer속성을 사용해 파싱 완료 후 선언 순서대로 안전하게 바인딩되도록 유도하십시오.