HTTP overhead 줄이기

1. 문제점

• 페이지에 많은 이미지나 비디오 파일이 포함되어 있습니다.
  
• 해당하는 이미지나 비디오 파일은 동일한 파일이 아니기 때문에 HTTP연결을 생성하고 초기화하는데 비용이 들어갑니다.
  
• 예) 아바타를 사용하는 Q&A 페이지에서 50개의 아바타를 로딩하는 경우
  
• 이미지가 다 로딩되지 않은 경우 페이지가 아직 사용하지 못하는 것처럼 인식될 수 있습니다. (onload시간에 js동작을 하게 하였다면 로딩전까지 js가 실행되지 않겠죠)

2. 해결책
이미지의 src를 기본값이 되는 "디폴트 이미지#http://원주소"로 변경하여서 처음 페이지 로딩 시에 디폴트 이미지를 로딩하게 합니다.

<img src="default.gif#http://avatarurl" ... >

페이지 로딩이 끝난 다음(onload가 호출되는 시점)에 #뒤의 이미지 원주소를 로딩하게 합니다.

3. 소스코드

/*
        delayHTTPoverhead
        written by
                Christian Heilmann
        with help
                from Drew McLellan, David Dorward and Lawrence Carvalho
        http://www.wait-till-i.com/index.php?p=465
        License: http://creativecommons.org/licenses/by/3.0/
*/
delayHTTPoverhead = function(){
        var parentID = '';
        var avtClass = '';
       
        // 페이지의 default이미지를 원래 이미지로 교체해줍니다.
        function replaceImage(){
                var img = (parentID!=='')?
                        document.getElementById(parentID).getElementsByTagName('img'):
                        document.getElementsByTagName('img');
               
                var rep=/.*#/;
                for(var i=0;img[i];i++){
                        var src=img[i].src;
                       
                        if(src.indexOf('#')!=-1 && img[i].className.indexOf(avtClass)!==-1){
                                img[i].src = src.replace(rep,'');
                        };
                };
        }
       
        // onload에 replaceImage를 추가시켜줍니다.
        var _onload=wind_onloadw.onload;
        if(typeof window.onload!='function'){
                window.onload=replaceImage;
        }else{
                window.onload = function(){
                        if(_onload){
                                _onload();
                        };
                        replaceImage();
                };
        };
}();

4. 출처

• Wait till I come!의 Return of the HTTP overhead delay - this time without a server side component
  
• Wait till I come!의 Thinking lowsrc – how to make sites appear to be available a lot faster(PHP를 사용하는 해결책)
  
• via Simon Willison’s Weblog