Window load🤮

• 브라우저는 HTML을 읽다가 script 태그를 만나면 스크립트를 먼저 실행해야하므로 DOM 생성을 멈춘다.

• src 속성이 있는 외부 스크립트를 만났을 때도 마찬가지

• 외부 스크립트를 다운받고 실행한 후에야 남은 페이지를 처리할 수 있다.

• 만약 js파일 사이즈가 크고 인터넷이 불안정한 경우 사용자가 웹사이트를 볼 때까지 시간이 소요된다.

그래서 사용하는 해결방안들

body끝

• body끝 부분에는 script태그를 위치 시키면 html 다운로드가 끝난뒤 다운 받는다.

• 사용자 입장에서는 페이지가 js를 받기도 전에 이미 준비가 되어있어 페이지안의 콘텐츠를 미리 볼 수 있다는 장점이 생긴다.

• 단점은 웹사이트가 자바스크립트 코드에 의존적인 상태로 개발이 되었다면 js를 다운 받지 않았는데도 요소를 클릭하여 js가 제대로 동작하지 않을 수 있다.

async

• async속성은 DOM 렌더링 과정을 방해하지 않도록 한다.

• 하지만 async는 실행순서가 정해져 있지않아 js두개가 서로 의존성이 있다면 제대로 동작하지 않을 수 있다.

• 또한 완전한 비동기로 불러오기 때문에 DOM이 모두 로드된 경우 발생하는 DOMcontentLoaded 이벤트 콜백으로 로드를 보장할 수 없다.

defer

• defer는 async와 비슷하게 동작한다.

• defer는 모든 DOM이 로드된 후에야 실행이 된다.

• 실제로 더 빨리 로드되는 스크립트가 있다고 하더라도 실행은 항상 선언한 순서대로 실행된다.

• 물론 DOM구성이 끝난이후에..