JS script가 브라우저에서 로딩될 때

얼마 전 정리했던 SSR(Server Side Rendering)과 CSR(Client Side Rendering)에서

알아봤듯이, Client에서 JS가 렌더링 된다면 초기 렌더링이 늦어진다는 단점이 있었다.

초기에 불러와야 하는 JS파일, HTML, CSS등의 양이 많기 때문인데,

이 JS파일이 브라우저에서 한 번에 로딩될 때의 문제점과,

그 문제점을 해결하기 위한 방법을 알아보자.

문제점

JS파일을 읽을 때는, HTML 파싱이 중단되고 JS파일을 읽기 시작한다.

만약에 많은 양의 JS파일을 브라우저에서 한 번에 로딩한다면,

그 시간만큼 HTML 파싱이 중단된다. (블록모드)

그러면 사용자는, 그 동안 빈 페이지를 보게 되고, 대기 시간이 길어져 나쁜 UX를 제공하게 된다.

(사용자는 현재 페이지가 로딩이 되고 있는건지, 페이지에 문제가 있는건지 알 수 없고,

또한 시간이 걸려 페이지가 로딩 되었다고 해도 단지 로딩 시간이 긴 것인지, 성능이 나쁜 좋지 못한

페이지인지 알 수 없기 때문에 사용자 유출이 생길 수 밖에 없다)

해결 방법 1.

JS파일을 import하는 script 태그를 body태그의 마지막에 넣어

HTML 파싱이 전부 완료된 후에 JS파일이 읽혀지도록 한다.

해결 방법 2.

script 태그에 defer를 사용한다.