스크립트 로드 시점
October 22, 2021
Q. 모든 자바스크립트 파일을 브라우저에서 한 번에 로딩할 때의 문제점
[참고]
결론
브라우저는 <script> 태그를 만나면 스크립트가 해석 및 실행되는 동안 HTML의 파싱을 중단합니다. 그 후 필요한 자바스크립트 파일을 다운받고, 실행한 다음 HTML의 파싱을 이어 나갑니다. 그렇기 때문에 JS 파일의 사이즈가 크다면 사용자가 웹 사이트를 보는 데까지 많은 시간이 소요됩니다.
설명
그래서 <script> 태그를 <head>태그에 넣는 대신 <body>의 끝 부분에 위치시키는 방법을 많이들 씁니다. 이렇게 되면 사용자는 페이지 컨텐츠를 빠르게 볼 수 있습니다.
그러나 이 방법에도 단점이 있습니다. 사용자가 기본적인 HTML 컨텐츠를 빨리 본다는 장점은 있지만 만약 웹 사이트가 자바스크립트에 굉장히 의존한다면, 즉 사용자가 의미 있는 컨텐츠를 보기 위해서는 자바스크립트를 이용해서 서버에 있는 데이터를 받아온다든지, DOM 요소를 꾸며준다든지 하는 웹 사이트라면 여전히 사용자 경험에 좋지 않습니다.
이를 해결하는 방법으로는 <head>태그 안에 <script> 태그를 넣되, async 속성값을 쓰거나 defer 속성값을 쓰는 방법이 있습니다.
async속성을 쓰면 HTML 파싱과 JS 파일의 다운로드를 동시에 실행하고, JS 파일의 다운로드가 완료되면 JS 파일을 실행하고, 나머지 HTML 파일을 파싱합니다.defer속성을 쓰면 HTML 파싱과 JS 파일의 다운로드를 동시에 실행하고, JS 파일의 다운로드가 완료돼도 HTML 파싱이 끝나고 나서야 JS 파일을 실행합니다.
요약
브라우저는 JS 파일을 다운로드 및 실행하는 동안 HTML의 파싱을 중단하기 때문에 사용자가 컨텐츠를 보는 데까지 많은 시간이 소요됩니다.
