defer

• defer 속성을 가진 스크립트는 브라우저가 <script defer>를 만났을 때 다운로드 시작하지만, HTML파싱을 막지 않고 </html> 을 만났을 때 실행된다.
• 하지만 일부 브라우저에서는 defer속성을 지원하지 않음므로 주의해야한다.

async

• async 속성을 가진 스크립트는 브라우저가 해당 요소를 만났을 때 외부 스크립트 다운로드를 시작한다.
• defer와 마찬가지로 다운로드 중에 HTML파싱을 막지 않지만 다운로드가 완료되면 즉시 실행하고 실행하는 동안에는 HTML파싱을 잠시 멈춘다.
• async 속성의 스크립트에는 DOM을 조작하지 않으며 앞뒤에 로드되고 실행 될 스크립트와 의존성이 없는 코드만 포함하는 것이 좋다.

요약

HTML문서에서 script의 위치는 매우 중요하다. 스크립트가 로딩되고 실행되어야 하는 시점을 잘 파악하여 적절한 위치에 사용하는 것이 좋다.