브라우저가 화면에 표시할 컨텐츠들을 어떻게 받아오는가

브라우저가 컨텐츠를 받아오는 방식은 다음과 같다.

이렇게 웹 사이트에서 표시할 컨텐츠들을 서버에서부터 받아오는 작업을 [개발자 도구 > Network 탭]에서 확인할 수 있다.

Untitled

여기서 맨 처음 받아오는 www.naver.com의 이름을 가진 파일이 바로 HTML 파일이다.

Untitled

그 뒤로 CSS와 JS 파일들을 연달아 가져오는 것을 알 수 있다.

이를 고려한다면 컨텐츠의 개수를 줄이는 것이 베스트일 수 있다. 표시할 페이지가 간단하면 된다! 그러나 나타낼 데이터들이 많아지고 많은 정보를 보여주고 싶은 경우가 많으므로 웹 성능을 위해 컨텐츠의 개수를 줄이는 것이 능사는 아니다. 컨텐츠의 양을 유지하면서 HTTP 요청을 줄이는 방법을 찾는 것이 가장 좋다.

스크립트 파일 병합

만약 하나의 파일을 요청하고 받아오는 데에 1초의 시간이 소요된다고 해 보자. 1000개의 파일이 필요하다 한다면 1000초의 시간이 필요하다. 따라서 여러 곳에서 사용될 수 있는 로직을 하나의 파일로 묶어 사용할 수 있도록 자바스크립트 파일을 모듈화하여 사용하는 것이 HTTP 요청 수를 줄이는 데에 도움이 된다.

자바스크립트 파일을 분리하여 사용하였을 때

자바스크립트 파일을 분리하여 사용하였을 때

하나로 병합된 자바스크립트 파일을 사용하였을 때

하나로 병합된 자바스크립트 파일을 사용하였을 때

script 1, 2, 3 파일을 하나의 파일로 묶었을 때, 파일의 크기는 커졌지만 속도 면에서는 큰 차이가 없는 것을 알 수 있다. 따라서 이렇게 자바스크립트 파일을 묶는 것이 HTTP 요청/응답 속도를 높일 수 있는 방법이다.

스크립트 파일을 하나로 합침으로써 HTTP 응답 시간을 줄일 수 있다.