[펌] Ajax 성능 분석

[플밍지기]

Ajax 성능 분석

최신 도구를 사용하여 작업을 마무리하기

Kristopher William Zyp, 소프트웨어 개발자, Xucia

옮긴이: 장동수 dwkorea@kr.ibm.com

2008 년 6 월 03 일

비동기 자바스크립트 + XML(Asynchronous xxJavaScript + XML; Ajax) 덕분에 상호작용과 성능에 대한 사용자들의 기대치가 계속 높아지고 있고, Ajax를 웹 응용 프로그램의 필수 요소로 취급하는 개발자들도 점점 늘고 있습니다. 더 많은 코드가 클라이언트 측으로 이동하고 네트워크 모델이 바뀜에 따라, 커뮤니티는 Ajax 고유의 성능 문제들을 다루기 위해 더 많은 도구를 만들어내고 있습니다. Ajax-강화 응용 프로그램에서 성능 문제를 찾아내고 바로잡아주는 도구들에 대해 알아보겠습니다

성능은 응용 프로그램에 Ajax를 도입해서 개선하려는 일차적인 이유 중 하나다. Ajax는 서버와 통신할 때 전체 페이지를 요청하지 않으므로 응답 시간을 개선할 수 있다. 응답 시간을 줄이면, Ajax는 훨씬 더 나은 사용자 경험을 제공할 수 있다. 그러나 Ajax 응용 프로그램의 성능을 분석하고 향상시키려면 전통적인 웹 응용 프로그램과는 다른 도구가 필요하다. 이 기사에서는 이러한 도구들에 대해 알아보고, 성능 문제를 찾고 고치기 위해 그 도구들을 사용하는 방법을 보여준다.

자주 쓰이는 약어 CSS: Cascading Style Sheets HTML: Hypertext Markup Language XML: Extensible Markup Language HTTP: Hypertext Transfer Protocol

Ajax 응용 프로그램 성능은 웹 응용 프로그램의 몇 가지 측면에 근거한다.

• 서버 응답 시간
• 네트워크 전송 시간
• 클라이언트 자바스크립트 처리 시간

전통적인 웹 응용 프로그램 개발에서는, 서버 응답 시간이 성능 분석의 일차적인 관심사다. 성능 분석은 대부분 신속하게 요청을 처리하고, 필요한 응용 프로그램 로직을 수행하고, 응답을 생성하는 애플리케이션 서버의 능력을 측정한다. 일반적으로 잘 알려진 것처럼, Ajax 응용 프로그램 개발에서도 이러한 능력이 응용 프로그램 성능의 결정적인 측면이지만, 이 기사는 성능의 다른 부분에 초점을 맞출 것이다.

도구들

웹 응용 프로그램의 어떤 측면을 향상시켜야 하는지를 이해하려면, 응용 프로그램 구성요소를 적절히 분석해야 한다. 이 기사는 파이어폭스 확장인 파이어버그(Firebug)와 YSlow를 사용하여 웹 응용 프로그램을 조율하는 법을 알아 볼 것이다. 이 도구들을 설치한 다음, 개발하고 있는 사이트에 접속하고 파이어폭스 상태표시줄에 있는 YSlow를 클릭하면, 파이어버그 안에 YSlow 화면이 표시된다. Performance 단추를 누르면, YSlow가 응용 프로그램을 분석하여 응용 프로그램의 네트워크 전송 시간의 다른 부분들에 대한 보고서를 제공한다(그림 1).

그림 1. YSlow 보고서

네트워크 전송 시간

대부분의 웹 응용 프로그램에서는 네트워크 전송 시간이 가장 큰 병목 지점(bottleneck)이다. YSlow 보고서를 통해, 전송 시간을 줄이기 위해 무엇을 할 수 있는지를 이해하기 위해 네트워크 전송의 여러 가지 측면을 분석할 수 있다.

HTTP 요청 줄이기

모든 HTTP 요청은 서버로 요청을 보내고 응답을 받기 위해 어느 정도 시간을 필요로 한다. 응답 크기가 작더라도, 지연(latency)이라고 알려진 최소한의 왕복 시간이 있다. YSlow는 HTTP 요청 횟수에 근거해 등급을 알려준다. 요청이 많아지면 로딩은 느려진다. 더 적은 요소들을 로드해도 되도록 페이지를 단순화하면 HTTP 요청을 줄일 수 있다. CSS 스프라이트(sprite)를 사용하면 이미지 요청을 줄일 수 있다. CSS 스프라이트를 생성하는 도구는 참고자료에서 찾을 수 있다. 스크립트와 CSS 요청을 줄이려면, 페이지에 직접 포함시키거나 여러 개의 스크립트나 CSS 파일을 합치면 된다.

HTTP 캐시 파기(expiration) 헤더를 미래 날짜로 설정해서 브라우저가 해당 요소를 캐싱하도록 하면 HTTP 요청을 줄일 수 있다. 이 헤더는 사용자가 페이지 사이를 이동하거나 사이트를 다시 방문할 때 중요한데, 캐시할 수 있는 요소들은 사이트를 방문할 때마다 매번 받을 필요가 없다. 적절한 파기 헤더가 제공되면 프록시(proxy)를 사용해서 자주 로드되는 내용을 캐싱할 수 있다. 파기 헤더는 아래와 같은 형식이다.

Expires: Wed, 10 Mar 2009 10:00:00 GMT

너무 먼 미래를 파기 날짜로 사용하면, 실제로 내용이 바뀌었을 때도 브라우저가 캐시를 사용하게 되므로 파기 날짜를 하루 뒤 정도로 설정하는 것이 좋다. 새 버전이 나오면 브라우저가 새로운 요청 URL을 요청하도록 파일 이름에 버전을 포함시키는 방법도 있다. 아파치 웹 서버라면 ExpiresDefault 지시자를 사용해서 파기 헤더를 추가하도록 설정할 수 있다.

ExpiresDefault "access plus 10 years"

YSlow에서 Stats 단추를 누르면 페이지의 총 다운로드 크기를 확인할 수 있다. YSlow는 최초 방문자(캐시를 사용하지 않은)와 이후의 방문(캐시를 사용한)에 대해 페이지 크기를 보여준다.

DNS 검색 대체하기

HTTP 요청은 서버와 한 번 이상의 왕복을 포함할 수도 있다. 포함된 자원들이 여러 개의 호스트 또는 도메인 이름을 사용했다면, 브라우저는 추가적인 도메인 이름 시스템(Domain Name System: DNS) 검색을 수행해야 한다. YSlow는 이러한 경우를 알려준다. 그러나 여러 개의 DNS 이름이 실제로는 성능에 도움이 될 수 있음을 이해하는 것이 중요하다. 대부분의 브라우저는 오직 호스트당 두 개의 연결만을 허용하므로 여러 개의 호스트 이름을 사용하면 더 많은 연결, 즉 결과적으로 더 많은 동시 다운로드를 사용하게 된다.

위키백과에 따르면, 소스코드에서 모든 불필요한 문자를 기능성의 변경없이 제거하는 절차를 minify라고 한다. 이 불필요한 문자들은 보통 백색 공백(white space) 문자, 개행 문자, 주석, 그리고 종종 블록 구분자를 포함하는데, 코드의 가독성을 추가하기 위해 사용되지만 실행에는 필요없다.

부분 전송 크기 줄이기

HTTP 요청의 횟수를 줄이는 것과 함께, 요청되는 각 부분의 크기를 줄이는 것도 도움이 된다. 특정 포맷으로 압축하는 기술이 적용될 수 있으며, YSlow는 응답 크기를 줄이기 위해 성공적으로 적용될 수 있는 기술을 알려준다.

자바스크립트 코드, CSS, 그리고 HTML에서 불필요한 공백과 코멘트를 제거함으로써 축소할 수 있다. 자바스크립트 코드에서 변수의 이름을 바꿔 더 압축할 수도 있다. Packer와 YUI compressor는 자바스크립트 코드 압축을 위한 효과적인 도구인데, YUI compressor는 CSS 압축도 지원한다. xxJavaScript CompressorRater(참고자료)를 사용해 minifier들을 비교해 볼 수 있다.

리소스를 압축하는 가장 효과적인 방법 중 하나는 텍스트-기반 자원들에 대해 gzip(GNU zip)을 활성화하는 것이다. gzip을 사용하면, 일반적으로 내용 크기를 약 70% 줄일 수 있다. 그림이나 동영상 같이 이미 압축된 자원들은 gzip으로 압축하지 않는 것이 좋다. CSS, HTML, 자바스크립트 코드, XML, 자바스크립트 직렬화 객체 표기(xxJavaScript Serialized Object Notation: JSON)가 gzip 압축의 좋은 후보들이다. 아파치 1.3은 mod_gzip으로 gzip을 지원하고, 아파치 2.0은 mod_deflate를 사용한다.

자원 크기 측면에서, 응답 크기를 줄이는 것도 중요하지만, HTTP 요청 크기를 줄이는 것도 중요하다. 많은 인터넷 사용자들의 경우에, 업로드 속도가 다운로드보다 더 느리기 때문에 요청 크기가 성능에 더 민감할 수 있다. 긴 URL, 큰 post 데이터, 그리고 과도한 헤더들이 요청 크기를 증가시킬 수 있다. 파이어버그의 Net 탭에서 요청을 확인할 수 있다(그림 2). 요청 헤더를 불필요하게 증가시키는 가장 흔한 원인은 쿠키다. 쿠키는 모든 요청의 헤더에 포함되므로 긴 쿠키는 많은 추가 오버헤드를 만들어낸다.

그림 2. 파이어버그의 Net 화면

J2EE(Java™ 2 Platform, Enterprise Edition) 응용 프로그램은 이러한 몇 가지 성능 향상(캐싱 파기 날짜, gzip, 자바스크립트 압축 등)을 Resource Accelerate라는 간단한 필터를 사용해 적용할 수 있다. 또한 자원을 압축하기 위해 JSP(JavaServer Pages)용 pack:tag 태그 라이브러리를 사용할 수도 있다. 그 밖에도 선택할 수 있는 여러 가지 기술이 있다. 더 자세한 정보는 참고자료에서 찾을 수 있다.

다른 네트워크 전송 성능 향상

또 다른 YSlow의 권고는 CDN(Content Delivery Network: 콘텐츠 전송 네트워크)을 사용하는 것이다. CDN은 더 빠른 응답 시간을 제공하기 위해 최종 사용자들과 더 가까운 곳에 콘텐츠를 가진 분산된 서버의 네트워크를 제공한다.

CSS와 스크립트 순서를 적절히 조절하면 웹 페이지가 표시되는 속도를 향상시킬 수 있다. YSlow는 CSS와 스크립트 선언의 위치를 분석해 순서를 어떻게 조절해야 하는지에 대해 정보를 제공한다. 권고에 따르면 CSS 선언을 페이지 처음에 두면 표시할 때 즉시 사용될 수 있고, 스크립트를 페이지의 끝에 두면, 상호작용을 위해 자바스크립트가 로딩되기 전에 페이지를 표시할 수 있다.

자바스크립트 처리 시간

서버가 웹 페이지를 성공적으로 생성하고 브라우저로 전송하고 나면, Ajax 응용 프로그램은 사용자와의 상호작용을 자바스크립트 코드에 의존한다. 대부분의 사용자는 페이지가 완전히 다운로드될 때까지는 조금 기다릴 준비가 되어 있지만, 좋은 상호작용은 신속한 피드백에 의존하므로 페이지 내의 여러 부분에서 빠른 응답은 유쾌한 사용자 경험의 가장 중요한 측면일 수 있다. 또한, 브라우저는 다운로드할 자원을 기다리는 동안에도 여전히 응답할 수 있지만, 자바스크립트 코드를 연속적으로 실행하면, 브라우저가 얼어버릴(lock up) 수 있다.

파이어버그에는 프로파일링 도구가 포함되어 있다. Console 탭으로 가서 Profile을 클릭하면 프로파일러가 시작된다. 웹 응용 프로그램의 어느 부분이 자바스크립트를 과도하게 사용하는지 이해하는 데 도움이 된다. 프로파일러는 테스트를 여러 번 반복할수록 더 정확한 결과를 산출한다. 예를 들어, 페이지가 로드될 때 실행되는 상당한 분량의 자바스크립트 코드가 있다면, 페이지를 여러 번 로드하는 것이 좋다. 자바스크립트에 호버(hover) 이벤트 핸들러가 있다면, 프로파일러가 충분한 양의 정보를 모으는 동안 마우스를 페이지 여기저기로 움직일 필요가 있다. 이러한 동작들이 다 끝난 다음, Profile 단추를 한 번 더 누르면 프로파일 결과가 표시된다(그림 3).

그림 3. 파이어버그 프로파일 결과

프로파일 결과는 프로파일하는 동안 발생한 모든 함수 호출을 나열한다. 각 항목은 함수가 호출된 횟수와 함수 호출 처리 시간에 대한 통계를 보여준다. Time 열은 함수가 리턴될 때까지 걸린 시간의 총합을 나타내며, Own Time 열은 함수가 리턴될 때까지 걸린 시간의 총합에서 그 함수가 호출한 다른 함수가 리턴될 때까지 대기한 시간을 뺀 시간이다. Own Time은 비싼 처리가 주로 발생하는 곳을 나타내기 때문에 가장 중요한데, Percent열은 이 값에 근거한 값이다. 기본적으로, 파이어버그는 Percent열을 기준으로 정렬하는데, 높은 값이 더 위에 나온다. 가장 비싼 호출이 가장 위에 오기 때문에 프로파일을 읽기에 편리하고, 이 함수들의 성능을 개선하는 데 집중할 수 있다. 파이어버그를 사용하면 함수의 소스로 쉽게 갈 수 있다. 그냥 목록 내의 항목을 클릭하면 해당 함수로 이동한다.

자바스크립트 함수의 성능을 평가할 때, 함수가 호출되는 횟수도 주목해야 한다. 많이 호출되는 함수라면, 함수 그 자체가 느린 게 아니라 단지 너무 자주 호출되는 것일 수도 있다(Avg 열에서 평균 처리 시간도 볼 수 있다). 종종 형편없는 성능이 생각보다 너무 자주 호출되는 함수 때문일 경우가 있다. [안내]태그제한으로등록되지않습니다-xxonmousemove 같은 호버(hover) 이벤트 핸들러는 종종 엄청나게 많은 이벤트를 만들어 낸다.

처리에 시간이 너무 많이 걸리는 특정 함수를 결정했다면, 가능한 문제점을 파악하기 위해 자바스크립트 코드를 확인하고 싶을 것이다. 표 1은 느리다고 알려진 몇몇 자바스크립트 연산 목록이다. 벤치마크에 대한 더 자세한 정보는 참고자료에 나와 있다.

표 1. 느린 자바스크립트 연산

연산	설명
DOM 접근	DOM과의 상호작용은 대개 보통 자바스크립트 코드보다 더 느리다. DOM과의 상호작용은 대개 불가피하지만, 최소화하도록 노력해야 한다. 예를 들어, DOM 메서드를 사용해서 HTML을 만드는 것보다 문자열로 HTML을 만들어 innerHTML에 설정하는 것이 더 빠르다.
eval‎	eval‎ 메서드는 스크립트 평가에 상당한 오버헤드가 발생하기 때문에 가능한 피해야 한다.
with	with 문은 추가적인 유효 범위 객체를 만들기 때문에 변수 접근을 느리고, 또 모호하게 만든다.
for-in 순환문	for-in 순환문 대신 전통적인 for (var i=0; i<array.length;i++)를 사용해 배열을 순회하라. 불행히도 대부분의 자바스크립트 환경에서 for-in 순환문 구현은 느리다.

다른 브라우저

파이어버그와 YSlow를 가진 파이어폭스는 프로파일링을 위한 최고의 선택이다. Mac OS X용 사파리(Safari)에서도 HTTP 요청을 분석하기 위해 웹 인스펙터(Web Inspector)를 사용할 수 있다. 자바스크립트 성능 프로파일링을 위해 특정 함수의 성능을 Date 함수를 사용하여 수동으로 측정할 수 있다(Listing 1).

Listing 1. 수동 메서드 시간 측정

                
function myFunctionToTest() {
	var start = new Date().getTime();
	... // body of the function
	var totalTime = new Date().getTime() - start;
}

윈도우 인터넷 익스플로러(Windows? Internet Explorer?)의 부실한 메모리 관리도 성능에 걸림돌이 될 수 있는 문제 중 하나다. 패치하지 않은 인터넷 익스플로러 6과 이전 버전은 객체와 속성이 늘어나면서 점점 더 느려지는 증상이 있다. 일반적으로 알려진 바에 따르면, 예전 버전의 인터넷 익스플로러는 객체를 5000개 이상 만들면 눈에 띄게 느려진다.

결론

파이어버그와 YSlow를 사용하면, 웹 응용 프로그램을 분석해 성능을 개선할수 있다. YSlow는 네트워크 전송 시간을 줄이는 데 도움이 되는 자세한 정보를 제공한다. 파이어버그는 코드를 개선하는 데 핵심적인 영역을 결정하기 위해 필요한 자세한 자바스크립트 프로파일링 분석을 제공한다. 이 도구들을 함께 사용하면, 최고 수준의 사용자 경험을 제공하는 고성능 웹 응용 프로그램을 구축하는 데 도움이 될 것이다