(펌)HTML5를 활용하여 빠른 웹 애플리케이션 개발하기

본 글은 구글이 운영하고 있는 HTML5ROCKS (HTML5 개발자 사이트)에 올라온 Best Practices for a Faster Web App with HTML5를 기반으로 번역하여 정리한 것이다. 원문과 거의 비슷하지만 완전히 똑같이 번역한 것은 아니다.

원문: http://www.html5rocks.com/tutorials/speed/quick/

  

n  소개 

HTML5의 많은 부분은 지금까지 자바스크립트 라이브러리로 처리했던 다양한 기술과 기능에 대한 네이티브 브라우저 기능을 제공하는 것이다. 이러한 기능을 사용하는 것은 처리속도를 훨씬 빠르게 만들 수 있다. 본 튜터리얼에서는 어떻게 HTML5와 CSS3를 이용하여 반응이 빠른 애플리케이션을 개발할 수 있는지에 중점을 둔다.

 

n  팁1: 쿠키 대신 웹 저장소를 사용하라

쿠키는 지금까지 사용자 데이터를 식별하기 위해 지금까지 사용되어 왔지만 이는 심각한 단점들을 가지고 있었다. 가장 큰 결점은 모든 쿠키 데이터가 모든 HTTP 헤더에 추가된다는 것이다. 이는 성능에 커다란 악영향을 줄 수 있으며, 특히 XHR을 사용하는 경우에는 더욱 문제가 될 수 있다. 그래서 모범사례는 쿠키 크기를 줄이는 것이다. HTML5에서는 이보다 더 효과적인 방법이 있는데, 이는 쿠키 대신 sessionStorage와 localStorage를 사용하는 것이다.

 

// if localStorage is present, use that if (('localStorage' in window) && window.localStorage !== null) {     // easy object property API   localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';   } else {     // without sessionStorage we'll have to use a far-future cookie   //   with document.cookie!'s awkward API :(   var date = new Date();   date.setTime(date.getTime()+(365*24*60*60*1000));   var expires = date.toGMTString();   var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+                   ' expires='+expires+'; path=/';   document.cookie! = cookiestr; }

 

 

n  팁2: 자바스크립트 애니메이션 대신 CSS Transitions를 사용하라 

CSS Transitions는 두 상태간의 아주 매력적인 시각 효과를 준다. 대부분의 스타일 프로퍼티는 택스트 그림자(text-shadow), 위치(position), 배경 또는 색상 등에 대한 처리로 변화될 수 있다. “:hover” 또는 HTML5 폼, “:invalid”과 “:valid”와 같이 pseudo-selector states를 변화하여효과를 줄 수 있다.

 

div.box {   left: 40px;    -webkit-transition: all 0.3s ease-out;      -moz-transition: all 0.3s ease-out;         -o-transition: all 0.3s ease-out;            transition: all 0.3s ease-out; } div.box.totheleft { left: 0px; } div.box.totheright { left: 80px; }

 

“totheleft”와 “totheright” 클래스 토글링(toggling)을 추가하여 box를 이동할 수 있다. 이 코드의양을 자바스크립트 애니메이션 라이브러리와 비교해 보자. 명확히 브라우저에 보내지는 바이트 수는 CSS 기반 애니메이션을 사용할 때가 훨씬 적다. 추가적으로 GPU 레벨 가속화를 이용하면 이러한 시각 효과는 아주 부드럽게 처리될 것이다.

 

 

n  팁3: 서버와 통신하는 대신 클라이언트측의 데이터베이스를 사용하라 

Web SQL Database와 IndexedDB는 클라이언트 측의 데이터베이스 기능이다. XHR 또는 폼 제출(form submission)를 이용해 데이터를 서버에 포스팅하는 것이 일반적인 패턴이지만, 이러한 방식 대신 클라이언트 측의 데이터베이스를 사용할 수 있다. HTTP 요청을 줄이는 것이 모든 성능 엔지니어의 1순위 목표이다. 따라서 데이터베이스를 이용하여 서버와의 통신을 많이 줄일 수 있다. localStorage 그리고 sessionStorage는 특정 사이트의 각 단계별 입력 정보를 저장하는데 활용할 수 있으며, 이는 클라이언트 측의 데이터베이스 API 보다 훨씬 빠르다.

예를 들면, 만일 수백개의 메시지를 갖은 데이터 그리드 컴포넌트 또는 수신함이 있을 때, 로컬 데이터베이스 안에 데이터 저장을 한 것은 사용자가 검색, 필터링, 정렬 등을 원할 때HTTP로 서버와 통신하는 것을 크게 줄일 수 있다.

좀더 자세히 이해하고 싶으면 Web SQL Database Tutorial을 참고해라

 

n  팁4: 자바스크립트 개선은 상당한 성능 개선을 제공한다 

자바스크립티 1.6에는 Array prototype에 대한 많은 메소드가 추가되었으며, 이들은 지금 IE를 제외한 대부분의 브라우저에서 사용가능하다.

// give me a new array of all values multiplied by 10 [5,6,7,8,900].map(function(value){ return value*10; }); // [50,60,70,80,9000]    // create links to specs and drop them into #links ['html5','css3','webgl'].forEach(function(value){   var linksList = document.querySelector('#links');   var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');   linksList.innerHTML +=  newLink; });    // Return a new array of all mathematical constants under 2 [3.14, 2.718, 1.618].filter(function(number){   return number < 2; }); // [1.618]   // You can also use these extras on other collections like nodeLists [].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem,i){   localStorage['bucket' + i] = elem.getAttribute('data-bucket'); })

대부분의 경우 이들 Native 메소드를 사용하는 것은 전형적인 for 루프를 사용하는 것 보다 훨씬빠르다: for ( var i = 0; len = arr.length; i < len; i++ ).

Native JSON 파싱( JSON.parse() )은 json2.js 파일을 대체한다. Native JSON은 외부의 스크립트를 사용하는 것보다 훨씬 빠르고 안전하다. 이미 IE8, 오페라 10.50, 파이어폭스 3.5, 사파리4.0.3 그리고 크롬에서 이미 제공한다.

 

n  팁5: 라이브 사이트에 대해서도 캐쉬 매니페스트(cache manifest)를 사용하라 

2년전에 워드프레스(Wordpress는 워드프레스 터보(Wordpress Turbo)라는 기능을 추가하기 위해 구글 기어스(Google Gears)를 사용했다. 이는 속도를 높이기 위해 관리 패털의 많은 자원들을 로컬에 캐슁하였다. 우리는 이와 같은 기능을 HTML5의 애플리케이션 캐쉬(applicationCache)와 cache.manifest로 실현할 수 있다.

애플리케이션 캐쉬는 Expires 헤더를 설정하여 사용하는 것보다 좀더 많은 장점이 있다. 그리고 이러한 방법은 캐슁할 파일을 명확히 정리하여 사용할 수 있고, 따라서 브라우저가 특정자원이 사용되기 전에 미리 캐슁할 수 있기 때문에 실행 속도를 최적화 시킬 수 있다.

사이트의 구조를 탬플릿으로 생각해 보자. 이는 HTML의 구조는 그대로 유지하고 변경 가능한 데이터를 포함한다. 애플리케이션 캐쉬를 이용해서 사이트를 구성하는 HTML 템플릿들을 처리하고,  cache.manifest를 통해서 마크업을 캐슁한 후 컨텐츠의 업데이트는 JSON을 받아서 처리한다. 이와 같은 모델은 아이폰이나 안드로이드 Native 뉴스 앱이 하는 것과 아주 유사하다.

 이에 대한 가이드는 application cache tutorial을 참조해라.

  

n  팁6: 비주얼 처리를 개선하기 위해서 하드웨어 가속기능을 켜라 

가장 앞서고 있는 브라우저에서 많은 시각적 처리는 GPU-레벨 가속기능을 최대한 활동할 수 있다. GPU-레벨 가속기능은 고도의 동적 처리를 자연스럽게 처리하는데, 이는 Firefox Minefield와 IE9 그리고 사파리5에서 지원한다. 크롬은 현재 3D 변환 기능과 하드웨어 가속 기능을 윈도우 버번에서만 지원하며, 조만간 다른 플랫폼에서도 지원할 예정이다.

GPU 가속기능은 단지 아주 제한된 조건하에서만 동작한다. 그러나 3D 변환과 애니메이션 투명도는 이러한 기능을 기동시키기 위한 가장 일반적인 방법이다. 조심스럽게 이러한 기능을 켜는 방법은 아래와 같다. 

.hwaccel {  -webkit-transform: translateZ(0); }

 

그렇지만, 보장할 수는 없다. :)

지원되는 하드웨어 가속기능으로 애니메이션 변환(animated translation), 회전(rotation), 크기조정(scaling), 투명도는 확실히 부드럽게 표현될 것이다. 이들 효과는 층별 컨텐츠를 다시 그릴 필요없이 GPU로 직접 처리되는 장점을 가질 것이다. 그러나 페이지의 레이아웃에 영향을 주는 모든 프로퍼티들은 아직은 상대적으로 느리게 보일 것이다.

  

n  팁7: CPU에 부담을 많이 주는 오퍼레이션에 대해서는 웹 워커를 사용하라 

웹워커는 두가지 중요한 장점을 갖는다. 1) 속도가 빨라진다. 2) 태스크들을 수행하는 동안에도 브라우저는 반응할 수 있는 상황을 유지한다.  워커에 대한 데모는 HTML5 Slide Deck을 참고해라

웹워커를 사용하기에 적합한 몇몇 상황들은 아래와 같다. 

-       긴 문서의 테스트 포맷팅(Text formatting of a long document)

-       문법 강조(Syntax highlighting)

-       이미지 처리(Image processing)

-       이미지 합성(Image synthesis)

-       대량의 배열 처리(Processing large arrays)

 

 

n  팁8: HTML5 폼 애트리뷰트와 Input 타입 

HTML5에는 search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, color 등 새로운 input type들을 추가됐다. 현재까지는 이들 기능지원에 대한 브라우저간의 편차가 크며, 단지 오페라만 대부분 기능을 지원하고 있다. 따라서 이러한 기능을 사용할 때 접속하는 브라우저의 지원여부를 확인해서 절절한 처리를 해주어야 한다.

추가적으로 HTML5에 폼과 관련하여 입력 폼의 기본값을 사용자에게 흐릿하게 보여주는placeholder와 페이지를 로딩한 후 입력박스에 자동으로 커서를 위치시키는 autofocus 애트리뷰트가 추가되었다. 또한 사용자 입력 값의 검증 기능과 관련해서 사용자가 입력을 했는지를 검증해 주는 required 애트리뷰트 그리고 입력 값 검증을 위한 패턴을 표현하는 pattern 애트리뷰트가 추가되었다. Pattern 애트리뷰트에 자바스크립트 정규식으로 패턴을 정의하면 브라우저가 사용자가 입력한 값이 정의된 패턴에 맞는지 검증을 자동으로 해준다. 예를들어 이메일 주소 같은 것을 이러한 pattern 애트리뷰트를 이용해서 쉽게 검증할 수 있다. 이러한 기능을 사용하면 자바스크립트로 코드를 상당히 줄일 수 있으며 브라우저 내장된 기능으로 처리하기 때문에 속도가 빠르다.

이와 관련된 데모는 HTML5 Slide deck을 참고해라.

 

n  팁9: 이미지 효과를 표현할 때 CSS3 effects를 최대한 활용해라 

CSS3는 지금까지 정밀한 시각적 디자인 표현을 위해 사용하던 이미지 처리들을 대체할 수 있는다양한 종류의 기능을 제공한다. 2K 크기의 이미지를 100 Byte의 CSS로 대체하는 것은 큰 장점이다. 물론 추가적인 HTTP 요청이 필요없는 장점도 생긴다. 활용하기 좋은 CSS의 몇가지 주요 효과들은 아래와 같다. 

l  Linear and radial gradients

l  Border-radius for rounded corners

l  Box-shadow for drop shadows and glow

l  RGBA for alpha opacity

l  Transforms for rotation

l  CSS masks

 

예를들어 gradients를 이용해서 아주 우아한 버튼을 만들 수 있으며 이미지로 처리하던 다양한 효과들을 대체할 수 있다. 이와 같은 기능들은 대부분의 브라우저들이 안정적으로 지원하고 있다. 또한 이런 기능을 지원하는 않는 브라우저에 대한 처리는 Modernizr와 같은 라이브러리를 이용하여 체크하고 대응되는 이미지를 준비하여 처리하면 된다.

 

n  팁10: XHR보다 적은 밴드위스로 빠르게 전달할 수 있는 웹소켓 

웹소켓은 Comet의 인기가 급증하는 것에 대응해서 설계되었다. 지금은 XHR 모델 기반의Comet 대신에 웹소켓을 사용하는 것이 좋다. 

웹소켓은 간결한 프레임을 사용하기 때문에 XHR 보다 훨씬 적은 bandwidth를 소비한다. 몇몇 리포트에 따르면 유선 환경에서 35% 정도의 바이트가 줄어든다고 한다. 추가적으로 메시지를 전송할 때 큰 크기를 대상으로 하면 성능의 차이가 훨씬더 명확해진다. 시험에서 XHR이 웹소켓보다 3500% 정도의 전송 시간이 더 필요한 것으로 평가되었다. 최근에 에릭슨 실험실은 웹소켓의 시험을 통해 HTTP 기반의 ping 시간이 웹소켓에 비해 3배 ~ 5배 정도 길다는 것을 확인했다. 따라서 에릭슨에서는 웹소켓이 실시간 애플리케이션에 확실히 더 적절하다는 것으로 결론을 내렸다.

 

n  추가적인 자원들 

성능측정을 위해 파이어폭스의 Page Speed 플러그인, 그리고 YSlow를 사용할 수 있다. 추가적으로 Speed Tracker for Chrome과 DynaTrace Ajax for IE는 좀더 세부적인 분석 정보를 제공한다.

Chrome의 Developer Tools에 대한 가이드는 Resource Tab과 조만간 출시될 새로운 Audits panel을 통해 제공할 것이다.

원문 출처 : http://wonsuk73.tistory.com/22