구글님들의 CDN 에 <script async defer src='...'></script> 이딴게 있어서 알아보았다.

음 한참 글을 쓰다보니 그냥 참고한 페이지를 요약해놓은 것 밖에 안되서 요점만 적기로 했다.

script 태그에 defer 속성과 async 속성을 붙일 수 있다.

defer

• defer 가 붙은 스크립트 태그를 만나면, 스크립트 이후의 문서 파싱을 계속진행하면서 백그라운드로 스크립트를 다운 받고, 다운이 완료되면 실행시킨다.
• 스크립트 크기가 달라서 다운로드 시간이 달라진다고 하더라도, 스크립트 실행은 스크립트가 적힌 순서대로 실행이 된다.
• defer 는 외부 스크립트에만 해당된다. src 가 없다면 무시된다.

async

• async 가 붙은 script 태그를 만나면, 페이지와 독립적으로 다운로드/실행이 된다.
• 백그라운드로 다운로드가 되는 것은 defer 와 동일 하지만, defer 처럼 스크립트의 순서대로 실행을 기다리지 않는다.
• 다운로드가 완료되면 바로 스크립트가 실행된다. (스크립트가 실행중에는 문서 파싱이 멈춘다.)

동적 스크립트

• 자바스크립트를 사용하여 script element 를 만들어 추가하는 경우, async 와 동일하게 동작한다.

참고

• defer, async 스크립트