gzip을 이용한 JavaScript압축 전송 방법

테스터

gzip을 이용한 JavaScript압축 전송 방법

Web 2.0이 생활의 일부가 되면서 JavaScript의 크기가 점차 커지게 되었고 얼마나 빨리 JavaScript을 전송할 수 있느냐가 중요한 이슈가 되게 되었다.
이번에는 HTTP 1.1에서 기본적으로 지원하는 gzip압축을 이용해서 패킷 사이즈를 줄이는 방법을 알아보자.

작업은 브라우저는 Internet Explorer 7.0, 서버는 Tomcat 5.5를 이용하였고 패킷 압축에 대한 부분은 HTTP Watch를 이용하였다.

먼저 JavaScript을 압축하는 Servlet을 작성한다.
1) request.getHeader("accept-encoding") 함수를 이용해서 브라우저에서 지원가능한 Encoding 종류를 확인한다. 일반적인 브라우저에서는 gzip, deflate를 지원한다.
2) gzip을 브라우저에서 지원하는 경우 response의 header에 Content-Encoding=gzip으로 설정하고 java.util.zip.GZIPOutputStream을 이용해서 데이터를 압축한다.
3) gzip을 지원하지 않는 경우 기존 방식대로 ServletOutputStream을 이용해서 브라우저로 전송한다.
4) web.xml에 servlet을 등록한다.

<servlet>
<servlet-name>tester1</servlet-name>
<servlet-class>tester.Test</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>tester1</servlet-name>
<url-pattern>/tester1</url-pattern>
</servlet-mapping>

예제 소스는 아래와 같다.

package tester;

import java.io.*;
import java.text.*;
import java.util.*;
import java.util.zip.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class Test extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
OutputStream out = null;
try {
String jsSource = "alert('hello world!');";
String ae = request.getHeader("accept-encoding");
if (ae != null && ae.indexOf("gzip") != -1) {
response.setHeader("Content-Encoding", "gzip" );
out = new java.util.zip.GZIPOutputStream( response.getOutputStream() );
out.write( jsSource.getBytes() );
} else {
out.write( jsSource );
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if( out != null ) {
try {
out.flush();
out.close();
out = null;
} catch( Exception e ) {}
}
}
}

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}

그 다음 테스트를 위한 HTML을 작성한다.

<html>
<head>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<meta http-equiv='Content-Type' content='text/html; charset=euc-kr'>
<title>gzip test</title>
<script language='JavaScript'>
function test() {
var oXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
var url = "/tester1";
oXmlHttp.open("GET", url, true);
oXmlHttp.onreadystatechange= function() {
if (oXmlHttp.readyState == 4) {
alert( oXmlHttp.responseText );
eval( oXmlHttp.responseText );
}
};
oXmlHttp.send( null );
}
</script>
</head>
<body>
<a href="javascript:test()">gzip test</a>
</body>
</html>

HTTP Watch를 실행시키고 테스트를 수행하면 아래와 같다.

브라우저의 링크를 클릭하면 test1 서블릿에서 다운받은 스트링이 출력된다.

HTTP Watch의 Stream탭을 살펴보면 gzip으로 압축된 데이터가 전송되어 깨져 보임을 알 수 있다.

HTTP Watch의 Content탭을 살펴보면 압축이 풀려 있는 정상적인 데이터를 확인할 수 있다. 또한 데이터 압축률이 18.6%인 것을 확인할 수 있다. (실제 데이터가 많은 경우 훨신 나은 앞축율을 보여 주는 것을 확인할 수 있었다.)

< Prev Servlet을 활용한 JavaScript Caching

Proworks - Hashtable 객체 만들기 - 2부 Next >

♥