[HTML] script, script async, script defer

소이뎁·2023년 9월 11일

My HTML

목록 보기

5/7

🌈 학습을 위해 Must-Know-About-Frontend에서 가져온 내용을 수정, 추가하여 작성한 글입니다. 기존 내용과 대부분 유사하며 Summary 부분은 추가하였습니다.

<script> : HTML 파싱이 중단되고 즉시 스크립트가 로드되며 로드된 스크립트가 실행되고 파싱이 재개된다.
<script async> : HTML 파싱과 병렬적으로 로드가 되는데, 스크립트를 실행할 때는 파싱이 중단된다. 구글 애널리틱스와 같이 다른 스크립트가 의존하지 않는 독자적인 스크립트를 로드할 때 적합하다.
<script defer> : HTML 파싱과 병렬적으로 로드가 되는데, 파싱이 끝나고 스크립트를 실행한다. 보통 <body> 태그 직전에 <script> 를 삽입하는 것과 동작은 같지만, 브라우저 호환성에서 다를 수 있으므로 그냥 <body> 태그 직전에 삽입하는 것이 좋다.

주의할 점은 async와 defer의 경우 src 속성이 없으면 적용되지 않는다.

아래 그림을 통해 보다 확실하게 확인할 수 있다.