모든 Javascript 파일을 브라우저에서 한 번에 로딩 할 때의 문제점
- JavaScript 파일을 한 번에 로딩하게 되면, HTML의 화면 출력이 늦어지게 되어 유저가 해당 페이지에 문제가 있다고 생각하고 페이지 새로 고침이나 다른 페이지로 이동하는 등 UX가 부정적으로 느껴질 수 있다.
- 이런 현상은 JavaScript 파일이 스크립트를 가져오고, 또 실행하는 시간 동안에는 HTML 문서의 구문 분석을 일시 정지 하는데에서 오는 문제점이다.
스크립트가 로드되고 실행되는 동안에 브라우저가 DOM을 그리지 못하도록 블럭하기 때문에, 화면의 뷰가 늦게 보여지는 것이다.
- 이 문제를 해결하기 위한 방법으로 3가지를 들 수 있다
- 첫째는, 스크립트 태그를 주요 내용이 표시되는 HTML보다 아래에 작성하여 웹페이지의 주요 내용이 표시되고 난 후, 스크립트를 처리하도록 하는 것이다. 하지만 이는 완벽한 해결책은 아니다, HTML 문서가 큰 경우 페이지 자체가 느려지는 원인이 될 수 있기 때문이다.
- 두번째는 defer 방식으로, 브라우저가 스크립트를 만나면 DOM을 파싱하면서, 동시에 백그라운드에서 스크립트를 다운받는다. (async와 다르게) DOM의 파싱이 완료되고, 그 이후에 스크립트를 실행한다.
- 브라우저는 전체 스크립트를 병렬적으로 다운하므로 작은 스크립트가 먼저 다운되지만, 실행 순서대로 실행된다
- 외부 스크립트에만 유효하다(src가 없으면 무시됨)
- 세번째는 async 방식으로, 브라우저가 스크립트를 만나면 DOM을 파싱하면서, 동시에 백그라운드에서 스크립트를 다운받는다. 스크립트를 받고 난 후에는 DOM을 일시 정지하고 스크립트를 실행한다.
- defer와 다르게 다운로드 된 순서대로 뒤죽박죽 실행될 수 있다
- async 속성의 스크립트는 페이지와 완전히 독립적으로 동작한다, 그런 특성으로 독립적인 역할을 하는 서드 파티 스크립트를 현재 개발중인 스크립트에 통합할 때에 아주 유용하다, 개발중인 스크립트에 의존하지 않고, 반대도 마찬가지이기 때문이다
- Javascript.info - defer, async
- 브라우저의 역할과 스크립트의 로드 시점
