Javascript의 Defer vs async
스크립트는 다운로드 된 후에야 실행될 수 있다. 너무나 당연한 얘기다. 그렇기 때문에 때로는 원하는 순서대로 브라우저가 동작하지 않고 사용자 경험을 떨어뜨릴 수 있는 요인이 되기도 한다. 파싱 도중 script를 만날 때 <script> browser는 HTML을 읽다가 <script></script> 구간을 만나면 script를 먼저 순차적으로 실행하기 위해 파싱을 멈춘다. src 속성이 있는 외부스크립트 <script src="..."></script>를 만났을 경우도 마찬가지다. 이 경우에는 외부 스크립트를 다운받고 실행한 후에야 남은 page를 처리할 수 있다. <script async> 파싱 도중 <script async>를 만나면 문서 파싱 + 스크립트 다운로드를 같이 진행한다. 스크립트는 백그라운드에서 다운된다. 스크립트 다운이 완료되면 파싱을 멈추고 다운받은 스크립트를 실행한다. async의 의미답게 마치 비동기 이벤트처럼 동작한다. 다운받은 스크립트 실행이 끝나면 남은 문서를 마저 파싱한다. 돔이 100% 형성되지 않아서 dom 객체 존재하지 않는 context에서 html 객체를 참조하려고하면 오류를 raise한다. 방문자 수 카운터, 광고 블록과 같은 독립적인 script처럼 실행 순서가 중요하지 않은 경우에 적용한다. <script defer> defer 스크립트 또한 백그라운드에서 스크립트 다운로드를 진행하기 때문에 파싱 작업을 막지 않는다. defer로 받은 script의 실행시점은, </html>을 만났을 때, 즉, 문서의 끝에 도달했을 때 실행된다. </html> - (실행 시점) - DOMContentLoaded script를 실행할 때 html 요소들이 반드시 선행적으로 필요한 경우 defer를 사용한다. defer 속성은 기본적으로 true이다. script에 src속성이 없다면 d...
