script 태그의 defer와 async 속성은 외부 JavaScript 파일을 불러올 때 브라우저의 동작을 제어하는 중요한 속성입니다. 두 속성의 주요 특징과 차이점은 다음과 같습니다:
defer 속성
- HTML 파싱과 스크립트 다운로드가 병렬적으로 진행됩니다[1].
- HTML 문서 파싱이 완전히 끝난 후에 스크립트가 실행됩니다[1][2].
- DOM을 조작하거나 HTML 의존성이 있는 스크립트에 적합합니다[1].
- 여러 스크립트가 있을 경우 선언된 순서대로 실행됩니다[1][4].
async 속성
- HTML 파싱과 스크립트 다운로드가 병렬적으로 진행됩니다[1][3].
- 스크립트 다운로드가 완료되면 즉시 실행됩니다. 이때 HTML 파싱이 일시 중단됩니다[1][3].
- DOM을 조작하지 않고 독립적으로 실행 가능한 스크립트에 적합합니다[1].
- 여러 스크립트의 실행 순서가 다운로드 완료 순서에 따라 달라질 수 있습니다[4].
주요 차이점
-
실행 시점:
- defer는 HTML 파싱이 완전히 끝난 후 실행
- async는 다운로드 완료 즉시 실행
-
실행 순서:
- defer는 선언된 순서대로 실행
- async는 다운로드 완료 순서에 따라 실행
-
HTML 파싱 중단:
- defer는 HTML 파싱을 중단하지 않음
- async는 스크립트 실행 시 HTML 파싱을 중단
-
사용 케이스:
- defer는 DOM 조작이 필요한 스크립트에 적합
- async는 독립적인 기능을 하는 스크립트에 적합
두 속성 모두 페이지 로딩 성능을 개선하는 데 도움이 되지만, 스크립트의 특성과 의존성에 따라 적절한 속성을 선택해야 합니다.
Citations:
[1] https://webroadcast.tistory.com/15
[2] https://www.tcpschool.com/html-tag-attrs/script-defer
[3] https://www.tcpschool.com/html-tag-attrs/script-async
[4] https://gobae.tistory.com/110
[5] https://weirdsector.tistory.com/55
[6] https://my-t-space.tistory.com/57
[7] https://wormwlrm.github.io/2021/03/01/Async-Defer-Attributes-of-Script-Tag.html
[8] https://velog.io/@jerrychu/script-load-%EB%B0%A9%EB%B2%95-async-defer-%EB%8F%99%EC%A0%81-load
script 태그의 defer와 async 속성을 설명하는 예시 사진이나 영상
이 개념을 설명하는 데 가장 효과적인 방법 중 하나는 시각적 타임라인 다이어그램이러한 다이어그램은 일반적으로 다음과 같은 요소를 포함:
- HTML 파싱을 나타내는 긴 막대
- 스크립트 다운로드를 나타내는 막대
- 스크립트 실행을 나타내는 블록
- DOM 준비 상태를 나타내는 이벤트 마커
이러한 다이어그램은 보통 세 가지 시나리오를 나란히 비교합니다:
1. 일반 <script> 태그
2. <script async> 태그
3. <script defer> 태그각 시나리오에서 HTML 파싱, 스크립트 다운로드, 스크립트 실행의 타이밍과 순서가 어떻게 다른지 시각적으로 보여준다.
이런 종류의 다이어그램은 Growing with the Web 블로그의 글에서 찾아볼 수 있다. 이 블로그의 이미지는 세 가지 시나리오를 명확하게 비교하여 보여준다.
또한, BitsOfCo.de에서 제작한 "async vs defer attributes" 애니메이션 비디오도 있습니다. 이 비디오는 각 속성이 브라우저의 동작에 어떤 영향을 미치는지 동적으로 보여준다.
이러한 시각적 자료들은 HTML 파싱, 스크립트 로딩, 실행 순서의 차이를 이해하는 데 매우 효과적입니다. 특히 시간에 따른 변화를 보여주는 애니메이션은 이 개념을 더욱 명확하게 전달한다.
Citations:
[1] https://webroadcast.tistory.com/15
[2] https://hihiha2.tistory.com/171
[3] https://www.daleseo.com/js-script-defer-async/
[4] https://yceffort.kr/2020/10/defer-than-async
[5] https://frontdev.tistory.com/entry/script-async-script-defer-%EC%96%B8%EC%A0%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%A9%B4-%EC%A2%8B%EC%9D%84%EA%B9%8C
[6] https://my-t-space.tistory.com/57
[7] https://gobae.tistory.com/110
[8] https://wormwlrm.github.io/2021/03/01/Async-Defer-Attributes-of-Script-Tag.html
