2022. 8. 8. 01:59ㆍ카테고리 없음
262_자바스크립트 읽기 타이밍 최적화하기
[적용]
- 자바스크립트 로딩 대기로 페이지의 표시를 방해하고 싶지 않을 때
- 페이지의 표시 속도를 높이고 싶을 때
[문법]
| 구문 | 의미 |
| <script src="주소" async></script> | JS 파일을 비동기로 읽어와 즉시 실행 |
| <script src="주소" defer></script> | JS 파일을 비동기로 읽어와 HTML 실행 완료 후 실행 |
[내용]
브라우저는 웹 페이지를 표시할 때 HTML 코드를 위에서부터 순서대로 실행한다.
head 태그 내 script 태그를 삽입하면 head 태그 실행 중 해당 script 태그에서 HTML 코드의 실행이 정지되고 동기 처리를 이용해 자바스크립트 파일의 다움로드를 시작한다.
하지만 script 태그에 defer 속성과 async 속성을 설정하면, 자바스크립트의 다운로드는 비동기로 실행되고 HTML 실행은 정지되지 않는다.
async와 defer의 차이는 자바스크립트의 실행 타이밍이다.
async는 자바스크립트의 다운로드 완료 시점에서 바로 실행되고,
defer는 HTML의 실행 완료 후 자바스크립트가 실행된다.
defer의 속성을 가지는 script 태그가 여러 개일 때는 위에서부터 순서대로 실행된다.
async의 속성을 가지는 script 태그가 여러 개일 때는 순서에 따른 실행 순서를 보장할 수 없으므로 독립적으로 동작하는 처리를 사용하는 것이 좋다.
async는 접속 기록 분석과 SNS 페이지 플러그인 등에 사용하면 효율적이다.
HTML index.html
<head>
<!--
각 스크립트는 비동기로 처리된다.
HTML 실행 완료 후 위에서부터 순서대로 실행된다.
-->
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
<script src="script3.js" defer></script>
</head>
[Appendix]
defer 속성은 HTML DOM 사용에 좋다.
defer 속성은 HTML 실행 완료 후 자바스크립트를 실행하므로
document.querySelector() 등 DOM의 각 요소 조작을 가능케 한다.
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김