합법적으로 구글의 서버를 빌려쓰는 방법

구글의 AJAX 라이브러리 API를 알고 계신가요?

AJAX 라이브러리리 API는 콘텐츠 배포 네트워크이며 가장 널리 사용되는 오픈소스 자바스크립트 라이브러리에 대한 아키텍처를 로드합니다. Google AJAX API 로더 메서드를 사용하여 google.load() 응용프로그램에서는 다음과 같이 가장 널리 사용되는 자바스크립트 오픈소스 라이브러리의 증가하는 목록에 전역적으로 신속하게 액세스할 수 있습니다.

웹개발에 있어서

jquery
prototype
script.aculo.us
mootools
dojo

와 같은 자바스크립트프레임워크를 사용하는 것이 이제는 무척이나 흔해졌습니다.

계속되는 버전업에 따라 거의 모든 기능이 안정화되었으며, 이미 무수히 많은 사이트에서 그 안정성이 입증되었습니다.

또한 개발속도 향상과, 유지보수의 편의성 역시 너무나도 큰 매력입니다.

골머리썩는 크로스브라우징 문제 역시 프레임워크를 사용하면 더이상 머리 빠질일이 없습니다.




우리는 보통 이러한 자바스크립트프레임워크를 사용할때 이렇게 사용합니다.


<script type="text/javascript" src="/js/jQuery.min.js"></script>


웹서비스가 운영되고 있는 서버에 자바스크립트 파일도 함께 업로드 하여 해당 위치를 참조하여 사용합니다.



바로 AJAX 라이브러리 API는 여러분들이 자바스크립트프레임워크 파일을 여러분의 서버에 업로드하여 링크하지 않고서

구글의 것을 이용할수 있게 하는 것입니다.

바로 구글의 서버에 js파일이 위치해 있고 여러분들은 구글의 서버의 js 파일을 링크하여 사용하면 되는것입니다.



이렇게 하면 뭐가 좋을까요?

잠복기를 단축시(CDN과 관련된 문제)키고, 병렬전송을 도우며, 더 나은 캐싱을 유도합니다. 트래픽 절감효과까지!



1. 잠복기 단축

야후에서 발표했던 웹사이트 성능 최적화 방법중의 하나라고도 알려진 CDN(Content Delivery Network)을 사용하게 됩니다.

CDN에서 간략히 설명하자면(저도 자세히는 모르기 때문에)

유저가 빨리 컨텐츠를 가져갈수 있도록 유저와 최대한 가까운 곳에 서버를 두라는 것입니다.

즉 여러 위치에 똑같은 일을 하는 서버들을 분산배치하고 사용자의 요청이 있을 경우 가장 가까운 서버와 통신하게 하는 방법입니다.


여러분이 구글의 ajax 라이브러리를 사용하게 될 경우 우리는 이 CDN에 대한 고민없이

구글이 알아서 CDN을 사용하여 우리에게 js 파일을 돌려줍니다.

즉 더 나은 퍼포먼스를 기대할수 있다는 말이지요.

물론, 자신의 서버의 js파일을 사용하는 것이 때로는 더 빠를수도 있습니다.


2. 병렬전송


HTTP연결은 2개의 커넥션(connection)으로 갯수의 제한이 있습니다.

즉 다시 말하자면 기본적으로 한번에 2개의 파일까지만 동시에 다운 받을수 있다는 말입니다.

그렇기 때문에 만약 1개의 파일이 용량이 커서 다운로드가 오래 걸리는 경우

계속 이 파일이 1개의 커넥션을 사용하고 있으므로 남은 1개의 커넥션으로 나머지 파일들을 다운받아야 합니다.

이처럼 큰 용량의 파일을 먼저 다운로드 하게되는 경우 1개의 커넥션이 큰 용량의 파일에 오랜시간 잡혀있게 되어

커넥션의 손해를 보기 때문에

용량이 큰 파일은 가급적으로 나중에 다운 받도록 하는것이 더 빠른 로딩을 위해 필요합니다.

js파일을 자신서버에 위치시키고 참조한다면

이 파일역시 자신의 커넥션을 잡아먹게 되는데

구글의 ajax 라이브러리를 사용하는 경우 다른 호스트네임(hostname)으로 request가 되므로

내 도메인에서 사용할수 있는 커넥션의 갯수에는 영향을 받지 않습니다.




3. 더 나은 캐싱

캐싱에 있어서도 이미 사용자가 다른 사이트에서라도 구글 ajax 라이브러리를 통해서 js 파일을 다운로드한 적이 있는경우 이미 해당 사용자의 컴퓨터에 캐싱이 되어있으므로 캐싱의 측면에서도 이득이 있습니다.






적용하기

<script src="http://www.google.com/jsapi"></script>
<script>
  // Load jQuery
  google.load("jquery", "1");

  // on page load complete, fire off a jQuery json-p query
  // against Google web search
  google.setOnLoadCallback(function() {
    $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&v=1.0&callback=?",

      // on search completion, process the results
      function (data) {
        if (data.responseData.results &&
            data.responseData.results.length > 0) {
          var results = data.responseData.results;
         
          for (var i=0; i < results.length; i++) {
            // Display each result however you wish
            alert(results[i].titleNoFormatting);
          }   
        }
       
      });
    });
</script>


구글에서 보여주는 예제인데 콜백함수가 너무 길어서 자칫 복잡해보일수도 있으니

google.load() 메소드만 사용하여 더 간단히 표현해보겟습니다.



<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>


다운받고자 하는 프레임워크 이름과 버전명을 인자로 넣어 google.load함수를 실행하면 해당 프레임워크가 로딩이 됩니다.





실제로 테스트를 해보겠습니다.




테스트에 사용된 파일은 prototype 1.6.0.3 버전입니다.

이 파일을 로컬에 위치한 js 파일을 참조하였을때와

구글 ajax 라이브러리를 사용했을때 로딩 차이를 비교해보겠습니다.



1. 로컬의 js 파일을 로딩하였을때 : 약 1.59초

2. 구글 ajax 라이브러리를 이용하였을 때 : 합계 약 1.1초

구글 ajax 라이브러리를 사용하여 테스트한 결과가 좀더 빠른 로딩 속도를 보여주었습니다.

google.load()함수를 이용하게 되면 jsapi 를 요청한 다음에 실제로 내가 필요한 자바스크립트 라이브러리 파일을 불러오게 됩니다.

그래서 jsapi 를 요청하는데 쓰이는 349ms 조차 아까워지는데요.



그래서 권장드리는 방법은 구글의 자바스크립트라이브러리 파일을 직접 참조하는 것 입니다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>


바로 이렇게 말이죠.

이렇게 사용하게되면 jsapi를 불러올 필요조차 없어집니다.

그럼 로딩속도를 살펴볼까요?

641ms!!

(결과값은 서버와 네트워크 환경에 따라 얼마든지 달라질수 있습니다)




구글 AJAX 라이브러리를 사용하였을때 충분한 로딩속도 향상을 볼 수 있었습니다.

이 뿐만 아니라 prototype 1.6.0.3의 경우는 용량이 약 120kb가 되는데

이정도의 트래픽을 계속해서 줄일수 있는 트래픽 절감 효과도 있습니다.



각 라이브러리의 경로와 사용방법에 대해서는

http://code.google.com/intl/ko-KR/apis/ajaxlibs/documentation/index.html

이문서에 자세히 나타나있으니 개발에 참고하시기 바랍니다.



여러모로 장점이 많은 구글 AJAX 라이브러리의 사용.

여러분들도 자신이 운영중인 홈페이지에 사용하여 보시고, 더 나은 결과값을 보여주는 경우 사용하시기를 권장합니다.