🗣️ "스크립트 태그 속성 중에 async vs defer 차이가 뭐에요?"

🗣️  "스크립트 태그 속성 중에 async vs defer 차이가 뭐에요?"

 

네, 지금부터 차이를 설명드리겠습니다.

async(어씽크)와 defer(디퍼)는 HTML문서에 JavaScript 파일을 비동기적으로 로드하는 두 가지 방법입니다.

async 속성부터 설명드리겠습니다. 스크립트가 HTML파싱을 하는 동시에 백그라운드에서 로드되며, 로드가 완료되는 즉시 파싱이 끝나지 않았더라고 실행되게 됩니다. 이는 다른 스크립트나 HTML파싱이 끝날때까지 기다려주지 않기 때문에 스크립트의 실행순서가 보장되지 않습니다. 이런 async 태그의 특징의 경우 광고 스크립트처럼 다른 스크립트와 독립적으로 동작할때 유리합니다.

다음 defer속성에 대해 설명드리겠습니다. 스크립트가 HTML파싱과 동시에 백그라운드에서 로드되지만 HTML파싱이 완료된 후에 실행됩니다. 이는 여러 defer 스크립트가 있는 경우, 스크립트가 로드된 순서대로 실행됨을 보장합니다. 주로 DOM이 완전히 로드된 후에 실행되어야 하는 스크립트에 적합합니다.