HTML5를 사용한 빠른 웹 앱을 위한 권장사항

Paul Irish

소개

대부분의 HTML5는 지금까지 JavaScript 라이브러리를 통해 달성한 구성 요소 및 기술을 위해 기본 브라우저 지원을 제공하는 것을 목표로 합니다. 이러한 기능이 있는 경우 이를 사용하면 사용자에게 훨씬 더 빠른 환경을 제공할 수 있습니다. 이 가이드에서는 Yahoo의 훌륭한 성능 사이트 또는 Google의 Page Speed 문서 및 더 빠른 웹 만들기 사이트에서 확인한 우수한 성능 조사에 대한 요약은 다루지 않습니다. 대신 HTML5 및 CSS3를 사용하여 웹 앱의 응답성을 개선하는 방법에 초점을 맞추겠습니다.

팁 1: 쿠키 대신 웹 저장소 사용

쿠키는 수년 동안 순 사용자 데이터를 추적하는 데 사용되었지만 심각한 단점이 있습니다. 가장 큰 결함은 모든 쿠키 데이터가 모든 HTTP 요청 헤더에 추가된다는 점입니다. 이는 특히 XHR에서 응답 시간에 측정 가능한 영향을 미칠 수 있습니다. 따라서 권장사항은 쿠키 크기를 줄이는 것입니다. HTML5에서는 이보다 더 잘할 수 있습니다. 쿠키 대신 sessionStorage 및 localStorage를 사용하면 됩니다.

이 두 개의 웹 저장소 객체는 세션 기간 동안 또는 무기한으로 클라이언트 측에 사용자 데이터를 유지하는 데 사용할 수 있습니다. 이들의 데이터는 모든 HTTP 요청을 통해 서버로 전송되지 않습니다. 쿠키를 제거하게 해주는 API가 있습니다. 다음은 두 API로, 쿠키를 대체로 사용하는 API입니다.

// 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;
}

도움말 2: JavaScript 애니메이션 대신 CSS 전환을 사용하세요.

CSS 전환을 사용하면 두 상태 간에 매력적인 시각적 전환을 할 수 있습니다. 텍스트 그림자, 위치, 배경 또는 색상 조작과 같은 대부분의 스타일 속성을 전환할 수 있습니다. :hover와 같은 의사 선택기 상태로의 전환이나 HTML5 양식, :invalid 및 :valid에서 전환을 사용할 수 있습니다 (양식 유효성 검사 상태의 예). 그러나 훨씬 더 강력하며 요소에 클래스를 추가하면 트리거될 수 있습니다.

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의 클래스 전환을 추가하여 상자를 이동할 수 있습니다. 이 양의 코드를 JavaScript 애니메이션 라이브러리의 코드와 비교해 보세요. CSS 기반 애니메이션을 사용하면 브라우저로 전송되는 바이트 수가 훨씬 적어집니다. 또한 GPU 수준 가속을 사용하면 시각적 전환이 최대한 원활하게 이루어집니다.

팁 3: 서버 왕복 대신 클라이언트 측 데이터베이스를 사용하세요

웹 SQL 데이터베이스 및 IndexedDB는 클라이언트 측에 데이터베이스를 도입합니다. XMLHttpRequest 또는 양식 제출을 통해 서버에 데이터를 게시하는 일반적인 패턴 대신 이러한 클라이언트 측 데이터베이스를 활용할 수 있습니다. HTTP 요청을 줄이는 것은 모든 성능 엔지니어의 주된 목표이므로 이를 데이터 스토어로 사용하면 XHR을 통해 많은 이동을 줄이거나 서버에 다시 게시물을 작성할 수 있습니다. localStorage 및 sessionStorage는 양식 제출 진행률 캡처와 같은 일부 경우에 사용할 수 있으며 클라이언트 측 데이터베이스 API보다 현저하게 빠른 것으로 확인되었습니다. 예를 들어 데이터 그리드 구성요소나 메시지 수백 개가 포함된 받은편지함이 있는 경우 데이터를 데이터베이스에 로컬로 저장하면 사용자가 검색, 필터링 또는 정렬을 원할 때 HTTP 왕복 시간을 절약할 수 있습니다. 친구 목록이나 텍스트 입력 자동 완성을 각 키 입력에서 필터링할 수 있으므로 훨씬 더 반응성 높은 사용자 환경을 만들 수 있습니다.

도움말 4: 자바스크립트 개선으로 상당한 성능상의 이점 제공

자바스크립트 1.6에서 배열 프로토타입에 많은 메서드가 추가되었습니다. 이 기능은 현재 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');
});

대부분의 경우 이러한 네이티브 메서드를 사용하면 for (var i = 0, len = arr.length; i &lt; len; i++)와 같은 일반적인 for 루프보다 속도가 훨씬 더 빨라집니다. 한동안 사용해온 json2.js 파일이 JSON.parse()를 통한 기본 JSON 파싱으로 대체됩니다. 네이티브 JSON은 외부 스크립트를 사용하는 것보다 훨씬 빠르고 안전하며 이미 IE8, Opera 10.50, Firefox 3.5, Safari 4.0.3 및 Chrome에 포함되어 있습니다. 네이티브 String.trim는 상응하는 긴 JS보다 빠르면서 더 정확할 수 있는 또 다른 좋은 예입니다. 이러한 추가 자바스크립트는 기술적으로 HTML5가 아니지만, 최근에 새로 추가된 기술들에 포함됩니다.

도움말 5: 오프라인 앱뿐만 아니라 실제 사이트에도 캐시 매니페스트를 사용하세요.

2년 전 Wordpress는 Google Gear를 사용하여 Wordpress Turbo라는 기능을 추가했습니다. 기본적으로 관리자 패널에서 사용되는 많은 리소스를 로컬에 캐시하여 파일 액세스 속도를 높일 수 있었습니다. HTML5의 applicationCache 및 cache.manifest를 사용하여 이 동작을 복제할 수 있습니다. 앱 캐시는 Expires 헤더 설정에 비해 약간의 이점이 있습니다. 캐시할 수 있는 정적 리소스를 나타내는 선언적 파일을 만들기 때문에 브라우저가 이를 크게 최적화할 수 있으며, 아마도 사용 전에 미리 캐싱할 수도 있습니다. 사이트의 기본 구조를 템플릿으로 간주하세요. 변경될 수 있는 데이터가 있지만 데이터의 HTML은 일반적으로 상당히 일관되게 유지됩니다. 앱 캐시를 사용하면 HTML을 일련의 순수한 템플릿으로 취급하고 cache.manifest를 통해 마크업을 캐시한 다음 유선으로 JSON을 전달하여 콘텐츠를 업데이트할 수 있습니다. 이 모델은 iPhone 또는 Android 네이티브 뉴스 앱과 매우 유사합니다.

도움말 6: 하드웨어 가속을 사용하여 시각적 환경 개선

주요 브라우저에서는 많은 시각적 작업에서 GPU 수준 가속을 활용하여 매우 동적인 시각적 작업을 훨씬 더 원활하게 만들 수 있습니다. Firefox Minefield 및 IE9용 하드웨어 가속이 발표되었으며 Safari 버전 5에서 하드웨어 수준 가속이 추가되었습니다. (모바일 Safari에는 훨씬 먼저 제공되었습니다.) Chromium에 Windows용 3D 변환 및 하드웨어 가속이 방금 추가되었으며, 다른 두 플랫폼도 곧 제공될 예정입니다.

GPU 가속은 상당히 제한된 조건에서만 시작되지만 3D 변환 및 애니메이션 불투명도가 스위치를 전환하는 가장 일반적인 방법입니다. 다소 어렵지만 눈에 거슬리지 않는 이 기능을 사용 설정하는 방법은 다음과 같습니다.

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

하지만 보장되지는 않습니다. :) 하드웨어 가속이 지원되고 사용 설정되면 GPU 합성을 통해 애니메이션 변환, 회전, 크기 조정, 불투명도가 더 부드러워집니다. GPU에서 직접 처리된다는 이점이 있으며 레이어 콘텐츠를 다시 그릴 필요가 없습니다. 그러나 페이지의 레이아웃에 영향을 미치는 모든 속성은 여전히 상대적으로 느립니다.

도움말 7: CPU 사용량이 많은 작업의 경우 Web Workers가

웹 작업자에게는 다음과 같은 두 가지 중요한 이점이 있습니다. 1) 속도가 빠릅니다. 2) 사용자가 작업을 계속하는 동안에도 브라우저는 응답성을 유지합니다. 실무자를 위한 HTML5 슬라이드 자료를 살펴보세요. Web Workers를 사용할 수 있는 몇 가지 상황은 다음과 같습니다.

  • 긴 문서의 텍스트 서식
  • 구문 강조표시
  • 이미지 처리
  • 이미지 합성
  • 큰 배열 처리

도움말 8: HTML5 양식 속성 및 입력 유형

HTML5에 새로운 입력 유형 집합이 도입되어 text, password, file 집합이 search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, color를 포함하도록 업그레이드됩니다. 이에 대한 브라우저 지원은 다양합니다. 현재 Opera가 가장 많이 구현되고 있습니다. 기능 감지를 사용하면 브라우저에서 기본적으로 지원되는지 (그리고 날짜 선택기 또는 색상 선택 도구와 같은 UI를 제공할지)를 확인할 수 있으며, 지원하지 않는 경우 JS 위젯을 계속 사용하여 이러한 일반적인 작업을 수행할 수 있습니다. 유형 외에도 몇 가지 유용한 기능이 일반 입력란에 추가되었습니다. 입력 placeholder는 기본 텍스트를 제공하며 클릭하면 지워지며 autofocus는 페이지 로드 시 캐럿에 포커스를 두므로 해당 필드와 즉시 상호작용할 수 있습니다. HTML5에서는 입력 유효성 검사가 또 다른 과정으로 도입됩니다. required 속성을 추가하면 이 필드가 채워질 때까지 브라우저에서 양식이 제출되지 않습니다. 또한 pattern 속성을 사용하면 테스트할 입력에 커스텀 정규 표현식을 지정할 수 있으며, 잘못된 값이 양식 제출을 차단합니다. 이러한 선언적 구문은 소스 가독성 측면에서 큰 업그레이드일 뿐만 아니라 필요한 JavaScript의 현저한 감소이기도 합니다. 마찬가지로 이러한 기능이 기본적으로 지원되지 않는 경우 기능 감지를 사용하여 대체 솔루션을 제공할 수 있습니다. 여기에서 네이티브 위젯을 사용하면 이러한 위젯을 가져오는 데 필요한 과도한 자바스크립트 및 CSS를 전송할 필요가 없으므로 페이지 로드 속도가 빨라지고 위젯 응답성이 개선될 수 있습니다. 입력 개선사항 중 일부를 사용해 보려면 HTML5 슬라이드 자료를 확인하세요.

팁 9: 무거운 이미지 스프라이트를 요청하는 대신 CSS3 효과를 사용하세요.

CSS3는 시각적 디자인을 정확하게 표현하기 위한 이미지 사용을 대체할 수 있는 여러 가지 새로운 스타일 지정 기능을 제공합니다. 2k 이미지를 100바이트의 CSS로 교체하는 것은 큰 이점입니다. 물론 또 다른 HTTP 요청을 삭제했다는 사실은 말할 것도 없습니다. 알아두어야 할 몇 가지 속성은 다음과 같습니다.

  • 선형 및 방사형 그라데이션
  • 둥근 모서리의 테두리 반경
  • 그림자 및 발광 효과를 위한 상자 그림자
  • 알파 불투명도의 RGBA
  • 회전 변환
  • CSS 마스크

예를 들어 그라데이션을 통해 아주 멋지게 다듬어진 버튼을 만들고 이미지 없는 다른 여러 효과를 복제할 수 있습니다. 이러한 대부분의 브라우저 지원은 매우 완벽하며 Modernizr와 같은 라이브러리를 사용하여 이 기능을 지원하지 않는 브라우저를 포착하여 대체 사례에서 이미지를 사용할 수 있습니다.

팁 10: XHR보다 적은 대역폭으로 더 빠른 전달을 하는 WebSocket

WebSockets는 Comet의 인기 증가에 대응하여 설계되었습니다. 현재 Comet over XHR 모델 대신 WebSocket을 사용하는 것이 실제로 이점이 있습니다.

WebSocket은 프레이밍이 매우 가벼워서 소비하는 대역폭이 XHR보다 적은 경우가 많습니다. 일부 보고서에 따르면 유선을 통해 전송되는 바이트가 35% 감소했습니다. 또한 크기가 클수록 메시지 전송과 관련된 성능 차이가 더 명백합니다. 이 테스트에서 XHR은 WebSockets보다 3, 500% 더 긴 총 시간으로 기록되었습니다. 마지막으로 Ericcson Labs는 WebSocket의 성능을 고려했으며 처리 요구사항이 더 많기 때문에 HTTP를 통한 핑 시간이 WebSockets보다 3~5배 더 긴 것을 발견했습니다. 그 결과, 실시간 애플리케이션에는 WebSocket 프로토콜이 확실히 더 적합하다는 결론을 내렸습니다.

추가 리소스

측정 및 성능 권장사항을 보려면 Firefox 확장 프로그램인 Page Speed와 YSlow를 사용해야 합니다. 또한 Chrome용 Speed Tracer 및 IE용 DynaTrace Ajax는 보다 자세한 분석 로그 기록을 제공합니다.