<< 시스템 모니터링을 위한 도구들 | Home | SQL JOIN을 이보다 더 쉽게 설명한 건 없다. >>

SPDY를 통한 웹 가속화 맛보기

SPDY는 구글이 더 빠른 Web을 실현하기 위해 throughput이 아닌, latency관점에서 HTTP를 고속화한 새로운 프로토콜이다. Chrome 브라우저에서 SPDY가 구현되어 있고 구글의 검색, 메일 등의 서비스에 이미 사용되고 있는 기술이다.
최근에는 Firefox 적용되었고, HTTP/2.0에서도 지원을 검토하고 있다. 그래서 이번에는 웹 고속화 관점에서 SPDY에 대해서 알아보고자 한다.

기존 웹이 왜 느린가?

웹서버는 웹 페이지를 사용자에게 보여주기 위해서 DNS 조회, TCP 연결 설정, 서버 작업 대기열 데이터 전송, 파싱 및 JavaScript를 실행하는 등의 많은 작업을 수행하고 있다.
Web 페이지는 생각보다 복잡한 것이다.
그런데 기존 웹의 작동방식은 한 개의 HTTP 세션에 요청과 응답을 처리해야하는 구조여서 Response를 기다리는 시간(RTT : Round Trip Time)이 필수적으로 들어간다. 그래서 다운로드 파일(javascript 및 이미지 등)이 증가하면 로딩 시간이 걸려 버리는 구조적인 문제를 안고 있다고 말할 수 있다.

구글이 웹 고속화를 위해서 해 왔던 것들

사용자의 웹 페이지를 빠르게 보이기 위해서 구글이 먼저 행한 것은 웹 브라우저의 고속화다. 즉, Google은 Chrome의 고속화에 주력하고 있다.
그동안 구글이 웹 고속화에 적용한 기술들을 살펴보면
  • JavaScript를 가속화해서 성능 향상을 꾀했고
  • Graphic performance - GPU Acceleration 적용되어 있고
  • DNS 요청에 이용자의 IP 주소를 붙이는 것으로, 가장 가깝고 빠르게 액세스할 수 있는 데이터 센터를 반환할 수 있게 하기 위해 DNS를 개선했고
  • TCP/IP의 규약이 80년대 초반의 열악한 환경에서 만들어졌는데 현재의 환경에 맞는 규약을 수정할 필요가 있어 TCP 개선안도 IETF에 초안을 제출했고
  • SSL은 데이터를 교환하기 전에 두 번 핸드 셰이크, 2번의 라운드 트립이 발생한다. 이 문제를 해결해 Android SSL의 10%고속화를 실현했고
  • SPDY 기술을 오픈소스화해서 Chrome과 구글의 검색이나 메일 등에 활용해서 25%의 페이지 고속화를 실현했고
  • 구글의 인프라중의 하나인 Public DNS를 제공했다. 이는 글로벌하게 빠른 분산 DNS 기능을 제공하고 있다.

SPDY의 특징들

주요 특징은 아래와 같다.
  • 하나의 TCP session 을 통해서 동시에 여러 HTTP request를 처리한다.
  • HTTP header compaction : header 에서 필요 없는 data는 제거했고, 반복되는 data의 재전송 최소화 하고 header를 압축하였다.
  • 복잡하지 않은 message format을 사용했다.
  • WebSocket처럼 server에서 client로 communication이 가능하고, 필요 시 서버에서 클라이언트로 data를 push 할 수도 있다.

SPDY 속도 체험

1. 관련 샘플
- app.js
var spdy = require('spdy')
  , http = require('http')
  , fs = require('fs');

var options = {
  key: fs.readFileSync(__dirname + '/keys/spdy-key.pem'),
  cert: fs.readFileSync(__dirname + '/keys/spdy-cert.pem'),
  ca: fs.readFileSync(__dirname + '/keys/spdy-csr.pem')
};

var requestHandler = function(req, res) {
  var url_ = req.url.split(/[?#]/)[0];
  console.log("============= "+url_+" ======================");

  if(url_ === "/") {
    var mesg_ = req.isSpdy ? "Hello SPDY!" : "Hello HTTPS"
    res.writeHead(200, {'content-type' : 'text/html'});
    res.end(mesg_);
  } else {
    // Generic Web Server enhanced via SPDY technology
    var file_ = __dirname + "/public" + url_;
    fs.readFile(file_, function(err, data) {
      if(!!err === false) {
        var ext = url_.split(".").last()
          , contentType = mimeTypes.hasOwnProperty(ext) ? 
           mimeTypes[ext] : "text/plain";

        res.writeHead(200, {
          "Content-Type": contentType,
          "Content-Length" : data.length }
        );
        res.end(data);
      } else {
        res.writeHead(404);
        res.end("file not found");
      }
    });
  }
}

spdy.createServer(options, function(req, res) {
  requestHandler(req, res);
}).listen(10001);

spdy 라이브러리를 require하여 options에서 인증서 기반의 파일을 지정(샘플 인증서 파일은 여기 사이트에서 얻음)하면 된다.
그리고 createServer() 메서드를 호출하는 것으로 끝난다. 코드 자체는 일반 HTTPServer를 쓰는 경우와 큰 차이 없다.
isSpdy 속성을 보면 SPDY에서 액세스되고 있는지 확인 할 수 있으니 참고하자.

2. 테스트 결과
테스트 내용은 150개의 아이콘 아미지를 로딩하는 샘플이다.

- 비 지원 브라우저(Opera 나 구 FireFox)에서 로딩 속도 : 323 msec



- Chrome에서 테스트 로딩 속도 : 170 msec



[참조 사이트]
Tags : , ,



Add a comment Send a TrackBack