toggle menu

브라우저의 리소스 병렬 다운로드를 가로막는 자바스크립트

2013. 12. 2. 19:58 JavaScript
브라우저마다 설정이 다르지만, 공식적으로 HTTP 1.1 스펙에서는 하나의 호스트당 2개의 동시 다운로드를 허용하고 있다.
따라서 기본적으로 HTML 파일 안의 구성요소를 아래와같이 동시에 2개씩 다운로드 하게 된다.


 
과거에는 브라우저의 설정에 관계없이 서버상의 설정을 통하여서 동시 다운로드 갯수를 늘리기 위해 CNAME(DNS 별칭)을 지정해서 구성요소를 분산시켜 다운로드 받게 하는 방법을 사용했다. 이러한 트릭을 통해 사용자에게 동시에 여러개의 컴포넌트를 전송할 때 어느정도까지가 최적인지 알기 위해 야후에서 조사했을 때는 동시에 4개의 다운로드를 받도록하는 것이 퍼포먼스면에서 가장 낫다고 결론냈지만 디바이스의 성능이 향상된 지금까지 동일한 기준은 아닐 것이다.

이런 까닭에 최신 브라우저들은 대부분 동시에 4개 이상의 다운로드를 지원하고 있고 이는 모바일도 마찬가지이다.


대부분의 최신 브라우저가 일반적으로 4개 이상의 동시 다운로드를 지원하고 있다.

하지만, 자바스크립트가 다운로드되는 동안에는 아래의 두가지 이유때문에 동시 다운로드가 제한된다. 

  • 스크립트가 document.write 를 사용할 경우 페이지에 적절하게 쓰여졌는지를 확인하기 위해 브라우저는 기다린다. 
  • 스크립트가 순차적으로 로딩되어 실행할 수 있도록 하나의 스크립트가 로드될 때에는 다른 구성요소의 다운로드를 멈춘다.

따라서 스크립트를 페이지 아래로 이동시키고 또 스크립트 파일을 하나로 concatenation 해주는 것이 페이지 속도 최적화에 효과적이다.








 

JavaScript 관련 포스팅 더보기