자바스크립트 JavaScript | 스크립트 로딩 최적화: defer와 async 속성

 

⭕ 자바스크립트 JavaScript | 스크립트 로딩 최적화: defer와 async 속성

[프론트엔드/[이론] 웹 기술] - 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스

웹 구조 Web | 브라우저 렌더링 : CRP 프로세스

[프론트엔드/Javascript] - 자바스크립트 JavaScript | 렌더링 중단 : 스크립트 실행이 렌더링에 미치는 영향

자바스크립트 JavaScript | 렌더링 중단 : 스크립트 실행이 렌더링에 미치는 영향

 

➡️ ⭐ <script defer src="..."> 

• defer 속성을 사용하면, 스크립트는 페이지의 HTML 파싱을 방해하지 않으면서 다운로드가 시작됩니다. 스크립트 실행은 HTML 문서의 파싱이 완료된 후에만 진행됩니다.
• defer 사용 시, 페이지는 스크립트 실행 전에 먼저 화면에 표시됩니다. 따라서, 스크립트가 영향을 미칠 요소들에는 '로딩 인디케이터'를 추가하고, 관련 버튼을 사용 불가능하게(disabled) 처리하는 것이 필요합니다.

<p>...스크립트 앞 콘텐츠...</p>

<script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>

<!-- 바로 볼 수 있습니다. -->
<p>...스크립트 뒤 콘텐츠...</p>

• 스크립트는 추가된 순서대로 실행됩니다. 긴 스크립트가 먼저 오고 짧은 스크립트가 그 뒤에 와도, 짧은 스크립트는 긴 스크립트가 끝날 때까지 실행을 기다려야 합니다.
• DOM 전체를 대상으로 하거나 실행 순서가 중요한 스크립트에 defer 속성을 적용합니다.

 

---

• ** 추가 학습 필요
• defer 및 async도 head와 body에 스크립트 위치에 따른 차이가 존재하는지?
• 미니 과제를 실행하면서, script를 defer 속성을 사용하고 head에 배치였을 때는 작동이 되지 않았는데, defer을 적용하고 body에 배치하니 작동하였습니다.
• 하지만, 과제 중간에 head로 이동하였는데 또 작동이 되더라고요,,, (캡처를 할 걸 🥲)

 

➡️ <script async src="...">

• async 속성을 사용하면, 스크립트의 다운로드가 페이지 콘텐츠 처리를 방해하지 않고 진행됩니다. 그러나, 스크립트가 실행되는 동안 HTML 파싱은 일시적으로 중단됩니다.
• async 사용 시, 스크립트가 여러 개 존재할 경우 실행 순서가 다운로드 완료된 순서에 따라 결정됩니다.
• 방문자 수 카운터나 광고 스크립트 같이 실행 순서가 중요하지 않은 독립적인 스크립트에 async 속성을 적용합니다.