자바스크립트 로드 실행 순서 간단 설명 - async, defer

자바스크립트 로드 실행 순서 간단 설명 - async, defer

자바스크립트 로드 방법과 실행순서

요약: 웹 브라우저가 HTML 문서를 파싱하다가 (구문을 분석할 때)

아무 속성도 없을 때

HTML 파싱 시작 -> script 태그 파싱 -> script 태그의 src=""에 해당하는 스크립트 파일 다운로드 시작 -> HTML 파싱 중단 -> 자바스크립트 실행 -> 자바스크립트 실행 종료 -> 나머지 HTML 파싱 시작

Async 속성이 있을 때

HTML 파싱 시작 -> script 태그 파싱 -> script 태그의 src=""에 해당하는 스크립트 파일 다운로드 시작

Case 1) 스크립트 다운로드가 먼저 끝

스크립트 다운로드 완료 -> HTML 파싱 중단 -> 자바스크립트 실행 -> 자바스크립트 실행 종료 -> HTML 파싱 재개

Case 2) HTML 파싱이 먼저 끝

HTML 파싱 완료 -> 스크립트 다운로드 완료 -> 스크립트 실행 시작

Case1, Case2에 나열된 것 처럼 네트워크 성능에 따라서 자바스크립트 실행 순서를 보장할 수 없다는 점을 기억하자.

Defer 속성이 있을 때

HTML 파싱 시작 -> script 태그 파싱 -> script 태그의 src=""에 해당하는 스크립트 파일 다운로드 시작 -> 스크립트 파일 다운로드 시작 및 완료 -> HTML 파싱 완료 -> 스크립트 실행

Defer 속성이 있을 경우 스크립트 파일을 백그라운드(비동기)로 내려받지만 HTML 파싱이 완료되지 전에 스크립트 구문을 실행하지 않는다는 것을 기억하자.

from http://tamagotch.tistory.com/20 by ccl(A) rewrite - 2021-12-16 21:01:29