모든 자바스크립트 파일을 브라우저에서 한 번에 로딩 할 때의 문제점을 설명해주세요.

가. 자바스크립트 파일은 해당 파일을 가져올 때까지 HTML 문서의 구문 분석을 중단한다.

위 그림에서 보여주듯이 스크립트를 가져와서 실행하기 위해 HTML 구문 분석이 일시 중지되므로 HTML이 화면에 출력되는 시간이 길어진다. 만약 모든 자바스크립트 파일을 브라우저에서 한 번에 로딩하게 된다면 그만큼 HTML이 화면에 출력되는 것이 늦어지므로 스크립트 파일이 다 로드 될 때까지 아무것도 볼 수 없는 유저의 입장에서는 해당 페이지에 오류가 있다고 판단하여 페이지를 이탈할 가능성이 생기게 된다.

나. 자바스크립트 로드 방식

<script src="script.js">

스크립트가 로드 되고 실행되는 동안 브라우저가 DOM을 그리지 못하게 블럭하기 때문에 화면 뷰가 늦게 보여진다.

상기 스크립트 로드 방식의 문제점을 해결하기 위해 async와 defer 키워드가 등장했다.

<script async src="script.js">
<script defer src="script.js">

두 가지 방식 모두 브라우저가 DOM을 먼저 그리게 한다.

• 기존 방식
  브라우저가 스크립트를 만나면 스크립트를 다운 받고 난후 실행까지 연속적으로 수행한다. 이 동안에 브라우저는 DOM을 그리지 않는다.

• async 방식
  브라우저가 스크립트를 만나면 DOM을 그림과 동시에 스크립트를 다운받는다. 스크립트를 다운받고 난 후 바로 스크립트를 실행하는데, 실행하는 동안에는 DOM을 그리지 않는다.

• defer 방식
  브라우저가 스크립트를 만나면 DOM을 그림과 동시에 스크립트를 다운받는다. 스크립트를 전부 다운로드 받더라도 스크립트를 바로 실행하지 않고 DOM이 전부 그려질 동안 기다렸다가 스크립트가 실행된다.

출처 : https://velog.io/@dlrbwls0302/%EC%BD%94%EB%94%A9-%ED%85%8C%EC%8A%A4%ED%8A%B8%EA%B8%B0%EC%88%A0-%EB%A9%B4%EC%A0%91-%EC%A4%80%EB%B9%84%ED%83%90%EC%9A%95%EB%B2%95-%EB%AA%A8%EB%93%A0-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-%EB%A1%9C%EB%94%A9

https://zzossig.io/posts/javascript/script_load_dynamically/

https://webclub.tistory.com/630