고양의 성장일기

[HTML] <script> 로드와 실행 시점을 컨트롤하는 방법 본문

🖥️ Front-End/HTML

[HTML] <script> 로드와 실행 시점을 컨트롤하는 방법

고 양 2025. 9. 19. 20:40
반응형

 

<script> 로드와 실행 시점을 컨트롤하는 방법

이전 글에서는 <script> 태그의 목적에 따른 적절한 위치를 알아보았습니다.

혹시 그렇다면 태그가 로드되고 실행되는 시점은 따로 조절할 수 없을까요?

async와 defer속성을 이용하면 이 시점도 조절이 가능합니다. 각각 어떤 역할을 하는지 하나씩 알아보도록 하겠습니다.

 

단, 이 속성들은 외부 스크립트를 로드할 때에만 유효하며 인라인 스크립트일 경우 무시됩니다.

일반적인 script 로드와 실행

HTML 문서의 파싱(Parsing)은 보통 위에서 아래로 진행되며, 파싱 중 <script> 태그를 만나면 아래와 같이 동작합니다.

  1. HTML 파싱을 잠시 중단
  2. 스크립트 로드
  3. 스크립트 실행
  4. HTML 파싱 재개

이런 이유로 DOM이 모두 파싱된 후 실행되어야 하는 <script> 태그는 일반적으로 <body> 태그가 닫히는 부분에서 시작됩니다.

async

이 속성은 스크립트의 로드와 HTML 파싱을 병렬로 진행될 수 있도록 해줍니다.

브라우저가 이 속성을 가진 <script> 태그를 만나면

  1. 스크립트를 로드함
  2. HTML 파싱은 계속 진행

하지만 스크립트가 모두 로드되면 HTML 파싱을 잠시 멈추고 스크립트를 실행합니다.

스크립트의 로드와 실행이 다른 DOM 요소들과 상호작용할 필요가 없는 경우 HTML 파싱과 스크립트 로드 시간을 최적화할 수 있습니다.

defer

<script> 태그에 defer 속성을 추가하면 스크립트 실행 시점 더 정밀하게 조절할 수 있습니다.

이 속성이 붙은 스크립트는

  1. HTML 문서가 모두 파싱 될 때까지 실행되지 않습니다.
  2. 로드와 실행이 분리되기 때문에 스크립트 태그의 위치가 비교적 자유로워집니다.
  3. DOM과 상호작용하거나 사용자 이벤트에 반응해야 할 경우 매우 유용합니다.
  4. DOMContentLoaded 이벤트는 defer 속성이 붙은 스크립트가 실행된 후에 발생합니다.

속성에 따른 HTML 파싱 및 스크립트 실행 순서

속성별 타임라인을 정리하면 아래와 같습니다.

 

1. 일반적인 script

[브라우저 파싱 시작]
   ↓
<head> 읽음
   ↓
<script> 발견 → JS 다운로드 및 실행 (DOM 파싱 중단됨)
   ↓
JS 실행 완료 후 다시 DOM 파싱 재개
   ↓
<body> 렌더링
   ↓
</html> 파싱 완료

2. async

[브라우저 파싱 시작]
   ↓
<head> 읽음
   ↓
<script async> 발견 → JS 다운로드 시작 (DOM 파싱은 계속 진행)
   ↓
<body> 렌더링 (동시에 JS 다운로드 진행 중)
   ↓
(JS 다운로드 완료 시점) → JS 즉시 실행 (DOM 파싱 잠깐 중단됨)
   ↓
다시 DOM 파싱 재개
   ↓
</html> 파싱 완료
   ↓
DOMContentLoaded 이벤트 발생

3. defer

[브라우저 파싱 시작]
   ↓
<head> 읽음
   ↓
<script defer> 발견 → JS 다운로드 시작 (DOM 파싱은 계속 진행)
   ↓
<body> 렌더링 (동시에 JS 다운로드 진행 중)
   ↓
</html> 파싱 완료
   ↓
모든 defer 스크립트 실행 (작성 순서 보장됨)
   ↓
DOMContentLoaded 이벤트 발생

 

마치며

스크립트 실행 시점에 따라 웹페이지 성능과 사용자 경험이 달라질 수 있습니다.
HTML 파싱과 스크립트 로드/실행 순서를 이해하고 적절히 활용하면 서비스 품질 개선에도 긍정적인 영향을 줄 수 있습니다.

 

감사합니다!

 

이미지출처 및 참고 : https://ko.javascript.info/script-async-defer

반응형
저작자표시 비영리 변경금지 (새창열림)

'🖥️ Front-End > HTML' 카테고리의 다른 글

[HTML] <script> 태그의 적절한 위치를 찾아보자  (0) 2025.09.19
[HTML] <input> 태그에서 업로드 파일 타입 제한하기  (0) 2025.05.30
[HTML] HTML 요소에 공간 할당하기(Block, Inline, Inline-blcock)  (2) 2023.11.02
[HTML] HTML 문서에 표 만들기 - 테이블  (0) 2023.11.02
[HTML] HTML 문서에 체계적인 자료 구성하기 - 리스트  (0) 2023.11.02
'🖥️ Front-End/HTML' Related Articles more