본문 바로가기

자바스크립트

script 태그의 async와 defer 속성

https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

 

defer

 

script는 다운로드와 실행이 순차적으로 진행되는 것과 달리

브라우저가 defer 속성을 가진 script를 만났을 때 다운로드를 시작하고

html 파싱을 막지 않는다. </html>을 만났을 때 실행된다.

<body>의 맨 마지막 줄에 작성하는 것과 같이 스크립트가 DOM을 조작하는

내용을 포함하는 것이 좋다. 

참고: https://caniuse.com/?search=defer 

 

"defer" | Can I use... Support tables for HTML5, CSS3, etc

IntersectionObserver API that can be used to understand the visibility and position of DOM elements relative to a containing element or to the top-level viewport. The position is delivered asynchronously and is useful for understanding the visibility of el

caniuse.com

 

async

 

async 속성을 가진 스크립트는 브라우저가 해당 요소를 만났을 때 외부 스크립트를

다운로드 시작하고 html 파싱을 막지 않는다.

다만 다운로드가 완료되면 즉시 실행하고 실행하는 동안 html 파싱을 멈춘다.

async 속성의 스크립트에는 DOM을 조작하지 않으며 앞뒤에 로드되고 실행될

스크립트와 의존성이 없는 코드만 포함하는 것이 좋다.

참고: https://caniuse.com/?search=async 

 

"async" | Can I use... Support tables for HTML5, CSS3, etc

IntersectionObserver API that can be used to understand the visibility and position of DOM elements relative to a containing element or to the top-level viewport. The position is delivered asynchronously and is useful for understanding the visibility of el

caniuse.com

 

'자바스크립트' 카테고리의 다른 글

Jquery UI draggable creates a whitespace  (0) 2021.11.05
modal popup 구현  (0) 2021.09.06
Javascript’s __proto__ vs prototype  (0) 2021.06.28
생성자 함수의 객체 생성  (0) 2021.06.09
함수 객체의 프로퍼티  (0) 2021.06.08