[컴][웹] 자신이 만든 Web page 가 browser 에서 빠르게 load 되게 하는 방법

http://javascript.about.com/library/blfastpage.htm

web page loading 속도 향상시키는 방법 / page loading / fast page loading

우연찮게 찾아들어간 page 에서 web page 의 loading 속도를 향상시키는 법을 이야기 하고 있어서 간략하게 정리 해 본다.

여기서 이야기하는 바는 현재 web browser 에서는 javascript 가 download 끝나기 전에 다른 것들을 download 하지 않는데, trick 을 써서 javascript 와 page 에서 요청하는 다른 file 들을 동시에 download 하도록 하는 것이다.

web browser 에서 file 을 download 하는 시점

web browser 는 javascript 가 download 되고 run되는 동안에는 다른 file 들을 download 하지 않는다.(ref. 3 의 그림을 보면 이해가 쉬울 듯 하다.)

javascript 가 page 가 필요로 하는 download 할 파일들을 바꿀 수 있기 때문이다.(예를 들면, javascript 로 image 를 안보이게 설정할 수도 있고...) 그래서 javascript 가 download 되기전에 다른 파일들을 download 하는게 의미가 없다.

body tag 의 끝나는 지점에 script tag 를 삽입

그러면 모든 것들이 먼저 다운로드 되고나서 javascript 를 다운로드 하게 된다.
화면에 보여지는 속도는 향상될 수 있지만, javascript 가 실행전의 시간은 줄일 수 없다. 이 방법은 loading 등의 화면을 보여줄 때 좋다.(see also 1. 참조)

fast downloading

빠른 인터넷 속도를 가진 visitor(방문자) 들에게 빠른 load 를 가능하게 할 수 있다.

script tag 에 javascript 의 경로가 있는 아래와 같은 경우에는

<script src="javascript.js"></script>
<script src="javascript2.js"></script>

javascript 를 전부 다운로드 받기 전에는 다른 녀석들을 download 하지 않으며, javascript 의 download 가 끝난 이후에 다른 파일들(이미지등)은 동시에, 2개내지 6개씩 다운로드하게 된다.(browser 의 설정에 따라 다르다.)

여기서는 이를 피하기 위해서 script tag 에 작은 크기의 javascript 를 두고, 그 javascript 에서 head 에 새로운 script tag 를 넣는 방식을 취한다. 그러면 이렇게 요청된 javascript file 들은 browser 에서 정해놓은 동시에 다운로드 받는 file 수에 해당하지 않기 때문에, 다른 file 들을 download 받으면서 javascript 를 동시에 다운로드 받을 수 있는 것이다.

function addJavascript(jsname) {
  var th = document.getElementsByTagName('head')[0];
  var s = document.createElement('script');
  s.setAttribute('type','text/javascript');
  s.setAttribute('src',jsname);
  th.appendChild(s);
}
addJavascript('myscript1.js');
addJavascript('myscript2.js');

이 방법은 page downloading 하는 것보다 큰 대역폭(bandwidth) 를 가진 visitor 에게는 빠른 방식이지만, 만약 browser 에서 정해놓은 동시에 다운로드 가능한 file 의 개수를 다운로드 받는데에 자신의 bandwidth 를 모두 쓰는 경우에는, 당연한 이야기이지만, page 에서 요청한 file 들을 모두 다운로드 받고나서 javascript 를 받아야 하기 때문에 조금 느려진다.

HTML 5 async attribute

ref.2 에 보면 html5 부터는 script 에 async attribute 를 제공한다고 한다. safari 에서는 조금 다르지만, defer 라는 script 를 제공한다고 한다.

<script src="jquery.js" type="text/javascript" charset="utf-8" async defer></script>

위와 같은 방식으로 사용하면 된다. ref. 2 에서는 댓글에서는 다른 javascript 와 dependency 가 없는 경우에 사용하면 될 것 같다고 한다.

defer 와 async 의 차이점은 ref. 3 에서 확인할 수 있다.

See Also

1. How to show Page Loading image/div/text until the page has finished loading/rendering

Reference

1. Faster Loading Web Pages, About.com
2. http://davidwalsh.name/html5-async
3. http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/