📖 TIL - Script 로딩 전략: defer와 async 비교

🌟 들어가며

바닐라JS 프로젝트를 마치고.. 프로젝트 코드리뷰를 진행하다,
main.js script를 body 태그 끝지점의 바로 위쪽에 적어주지 않았다는 것에 의문을 가지시다. defer를 보곤

아, defer을 대신 추가해주셨군요!

라고 하셨었다. 사실 부끄럽지만.. 무의식적으로 script태그에 defer를 추가하면서도.. 이 아이가 정확히 무슨 역할을 하고 어떤 기능을 갖고있는지.. 공부도 하지 않은채 사용하고 있었던 것이였다.
사실 프레임워크에 익숙해지고 번들러(webpack, vite..)를 사용하면서 이 개념에 대해서 생략해버린걸지도 모르겠다...😓
프레임워크는 종종 내부적으로 스크립트의 로딩순서를 자동으로 처리해주니까....
script태그는 로딩되기전, 그니까 DOM 렌더링 생성을 멈추고 script를 실행하는데 이때 DOM 생성을 중단하지 않고 스크립트를 동시에 내려받게 할 수 있게 하는 방법이 바로 defer이다.
웹 페이지의 성능 최적화에서 JavaScript 파일의 로딩 전략은 매우 중요한데, defer 이외에도 async 속성은 스크립트 로딩 방식을 제어하는 핵심 도구이기에 개념을 찾아보게 되었다.

📝 기본 개념

좋은 이미지 자료를 찾앗다..!

일반적인 Script 로딩

<script src="script.js"></script>

• HTML 파싱이 중단됨
• 스크립트 다운로드 및 실행이 완료될 때까지 페이지 로딩이 차단됨
• 사용자가 빈 화면을 보는 시간이 길어질 수 있음

defer 속성

<script defer src="script.js"></script>

• HTML 파싱과 병렬로 스크립트를 다운로드
• HTML 파싱이 완료된 후 스크립트 실행
• DOM 완성을 보장하며 실행 순서가 보장됨
• DOMContentLoaded 이벤트 이전에 실행

async 속성

<script async src="script.js"></script>

• HTML 파싱과 병렬로 스크립트를 다운로드
• 다운로드 완료 즉시 실행 (HTML 파싱 중단)
• 실행 순서가 보장되지 않음
• 독립적인 스크립트에 적합

🔄 동작 방식 비교

일반 스크립트

1. HTML 파싱 시작
2. 스크립트 태그 만남
3. 파싱 중단
4. 스크립트 다운로드
5. 스크립트 실행
6. 남은 HTML 파싱

defer 스크립트

1. HTML 파싱 시작
2. 스크립트 태그 만남
3. 백그라운드에서 스크립트 다운로드
4. HTML 파싱 계속
5. HTML 파싱 완료
6. 스크립트 실행

async 스크립트

1. HTML 파싱 시작
2. 스크립트 태그 만남
3. 백그라운드에서 스크립트 다운로드
4. HTML 파싱 계속
5. 스크립트 다운로드 완료 시 파싱 중단
6. 스크립트 실행
7. 남은 HTML 파싱

🎯 사용 케이스

defer 사용 시기

• DOM 조작이 필요한 스크립트
• 실행 순서가 중요한 스크립트
• 메인 애플리케이션 코드
• jQuery와 같은 의존성이 있는 라이브러리

<script defer src="jquery.js"></script>
<script defer src="app.js"></script>

async 사용 시기

• 독립적인 기능의 스크립트
• 분석 도구 (Google Analytics)
• 광고 스크립트
• 위젯 스크립트

<script async src="analytics.js"></script>
<script async src="ads.js"></script>

⚖️ 장단점 비교

defer

장점:

• DOM 완성 보장
• 실행 순서 보장
• 페이지 로딩 최적화

단점:

• HTML 파싱 완료까지 실행 대기
• 모든 브라우저에서 지원하지 않을 수 있음

async

장점:

• 빠른 로딩과 실행
• 다른 스크립트에 영향 받지 않음
• 독립적인 스크립트에 이상적

단점:

• 실행 순서 보장되지 않음
• DOM 완성을 보장하지 않음
• 실행 시점 예측 어려움

🎨 시각적 비교

일반 스크립트:
HTML 파싱 ----[스크립트 다운로드/실행]---- HTML 파싱

defer:
HTML 파싱 --------------------------------|
스크립트 다운로드 -------------[실행]

async:
HTML 파싱 -------[스크립트 실행]-------
스크립트 다운로드 --[실행]

📌 결론

• defer는 메인 애플리케이션 코드에 적합
• async는 독립적인 기능의 스크립트에 적합
• 페이지 최적화를 위해 적절한 속성 선택이 중요