async vs defer

async vs defer

Web Browser는 HTML를 Rendering할때, CSS, JavaScript를 만날 시 동기적으로 처리한다.

이 부분은 Rendering 속도에 영향을 주게 된다.(사용자 경험 측면, SEO에 영향)

HTML Parsing을 멈추고 Script를 가져오고 실행까지 한다. 그 다음 남은 HTML Parsing을 진행한다.

HTML Rendering

 

async

async 속성을 true로 설정하면 CSS, JavaScript 비동기적으로 처리한다.

HTML Parsing을 멈추지 않고 Script를 가져오고 실행까지 한다.

// async default : true
<script async src="main.js" />

HTML Rendering [async]

Warning!!
async 속성을 설정하고 Script가 DOM에 접근해야될 경우에는 주의!
아직 HTML Parsing이 되지 않은 DOM에 접근하려고 할 수도 있다.

 

defer

defer 속성을 설정하면 async와 마찬가지로 CSS, JavaScript 비동기적으로 처리(fetch)한다.

그러나 Script의 실행은 HTML Parsing이 끝난 후 진행한다.

<script defer src="main.js" />

HTML Rendering [defer]

 

[주요용어]

SEO (Search Engine Optimization)

검색자의 의도를 이해해서 웹페이지 콘텐츠 제작, 검색 결과가 페이지에서 잘 노출되도록 웹페이지의 Tag, Link 구조를 개선하여 자연 유입 트래픽을 늘리는 것

검색엔진최적화는 무엇인가? - 어센트 코리아

 

[참고사이트]

 

script의 async와 defer 속성

Async & Defer — How to Load JavaScript Properly