이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

Paul Irish

소개

HTML5의 대부분은 지금까지 JavaScript 라이브러리를 통해 달성한 구성요소와 기법에 대한 네이티브 브라우저 지원을 제공하는 것을 목표로 합니다. 이러한 기능이 있는 경우 이를 사용하면 사용자에게 훨씬 더 빠른 환경을 제공할 수 있습니다. 이 튜토리얼에서는 Yahoo의 탁월한 성능 사이트 또는 Google의 페이지 속도 문서 및 웹을 더 빠르게 만들기 사이트에서 확인한 우수한 성능 연구를 요약하지 않습니다. 대신 오늘날 HTML5 및 CSS3를 사용하여 웹 앱의 반응성을 높이는 방법에 중점을 둘 것입니다.

도움말 1: 쿠키 대신 웹 저장소 사용

쿠키는 오랫동안 고유한 사용자 데이터를 추적하는 데 사용되어 왔지만 심각한 단점이 있습니다. 가장 큰 결함은 모든 쿠키 데이터가 모든 HTTP 요청 헤더에 추가된다는 점입니다. 특히 XHR 중에 측정 가능한 응답 시간에 영향을 미칠 수 있습니다. 따라서 쿠키 크기를 줄이는 것이 좋습니다. HTML5에서는 쿠키 대신 sessionStorage 및 localStorage를 사용하여 더 나은 방법을 사용할 수 있습니다.

이 두 웹 저장소 객체는 세션 기간 동안 또는 무기한으로 클라이언트 측에 사용자 데이터를 유지하는 데 사용할 수 있습니다. 또한 모든 HTTP 요청을 통해 서버로 전송되지도 않습니다. 쿠키를 없애는 데 도움이 되는 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 전환을 사용하면 두 상태 간에 매력적인 시각적 전환을 제공할 수 있습니다. 대부분의 스타일 속성은 text-shadow, 위치, 배경 또는 색상을 조작하는 것처럼 전환할 수 있습니다. :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: JavaScript 개선으로 상당한 성능 이점 얻기

JavaScript 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 < len; i++)와 같은 일반적인 for 루프보다 훨씬 빠른 속도를 얻을 수 있습니다. JSON.parse()를 통한 네이티브 JSON 파싱이 한동안 포함하는 데 익숙했던 json2.js 파일을 대체합니다. 네이티브 JSON은 외부 스크립트를 사용하는 것보다 훨씬 빠르고 안전하며 이미 IE8, Opera 10.50, Firefox 3.5, Safari 4.0.3, Chrome에서 지원됩니다. 네이티브 String.trim는 장문의 JS 등가 항목보다 빠를 뿐만 아니라 더 정확할 수 있다는 또 다른 좋은 예입니다. 이러한 JavaScript 추가 기능은 기술적으로 HTML5가 아니지만 최근에 제공되는 기술의 범위에 속합니다.

도움말 5: 오프라인 앱뿐만 아니라 실시간 사이트에도 캐시 매니페스트 사용

2년 전 WordPress는 Google Gears를 사용하여 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 사용량이 많은 작업의 경우 웹 워커가 실행됩니다.

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

긴 문서의 텍스트 서식 지정
구문 강조표시
이미지 처리
이미지 합성
대규모 배열 처리

팁 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를 대폭 줄여주는 큰 업그레이드입니다. 다시 말하지만, 이러한 기능이 기본적으로 지원되지 않는 경우 기능 감지를 사용하여 대체 솔루션을 제공할 수 있습니다. 여기에서 네이티브 위젯을 사용하면 이러한 위젯을 가져오는 데 필요한 무거운 JavaScript와 CSS를 전송할 필요가 없으므로 페이지 로드 속도가 빨라지고 위젯 응답성이 개선될 수 있습니다. 이러한 입력 개선사항을 사용해 보려면 HTML5 슬라이드 자료를 확인하세요.

도움말 9: 대용량 이미지 스프라이트를 요청하는 대신 CSS3 효과 사용

CSS3는 시각적 디자인을 정확하게 표현하기 위해 이미지를 사용하는 대신 다양한 새로운 스타일 지정 가능성을 제공합니다. 2K 이미지를 100바이트의 CSS로 대체하면 HTTP 요청이 하나 더 삭제되는 것은 물론 큰 이득입니다. 알아야 할 몇 가지 속성은 다음과 같습니다.

선형 및 방사형 그래디언트
둥근 모서리의 Border-radius
그림자 및 발광을 위한 Box-shadow
알파 불투명도용 RGBA
회전 변환
CSS 마스크

예를 들어 그라데이션을 통해 세련된 버튼을 만들고 이미지 없이 다양한 효과를 재현할 수 있습니다. 이러한 기능에 대한 브라우저 지원은 매우 안정적이며 Modernizr와 같은 라이브러리를 사용하여 기능을 지원하지 않는 브라우저를 포착하여 대체 시나리오에서 이미지를 사용할 수 있습니다.

도움말 10: XHR보다 적은 대역폭으로 더 빠르게 전송하는 WebSockets

WebSockets는 Comet의 인기가 높아짐에 따라 설계되었습니다. 이제 XHR을 통한 Comet 대신 WebSocket을 사용하는 것이 실제로 유리합니다.

WebSockets는 프레이밍이 매우 가볍기 때문에 소비하는 대역폭이 XHR보다 가벼운 경우가 많습니다. 일부 신고에 따르면 전송되는 바이트 수가 35% 감소했습니다. 또한 볼륨이 클수록 메시지 전송과 관련된 성능 차이가 더 분명해집니다. 이 테스트에서 XHR은 WebSocket보다 총 시간이 3, 500% 더 길게 기록되었습니다. 마지막으로 Ericsson Labs에서 WebSocket의 성능을 고려한 결과, HTTP를 통한 핑 시간이 WebSocket을 통한 핑 시간보다 3~5배 더 길었습니다. 이는 처리 요구사항이 더 많기 때문입니다. WebSocket 프로토콜이 실시간 애플리케이션에 훨씬 더 적합하다는 결론을 내렸습니다.

추가 리소스

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

HTML5를 사용한 빠른 웹 앱을 위한 권장사항 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

소개