웹 앱을 더 빠르게 만드는 HTML5 모범 사례

소개

이 기사에서는 HTML5와 CSS를 최대한 활용하여 웹 앱을 보다 원활하게 실행하는 방법에 중점을 둡니다.

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

쿠키의 가장 큰 단점은 규칙을 준수하는 모든 쿠키 데이터가 모든 HTTP 요청에 전달된다는 것입니다. 이렇게 하면 특히 XHR 요청에서 HTML5의 쿠키 대신 sessionStorage 및 localStorage를 사용하는 것이 좋습니다. 🎜>

이 대체 방법은 데이터를 사용자의 로컬 영역에 영구적으로 저장하거나 세션 시간 동안 저장할 수 있습니다. 따라서 우리는 웹 저장소를 사용하고 대안으로 쿠키만 사용하는 것을 선호합니다. 🎜> 팁 2: JavaScript 애니메이션 대신 CSS 전환 사용

CSS 전환은 더 높은 성능, 더 적은 코드, 더 쉬운 유지 관리 및 이해를 가져올 수 있습니다.

팁 3: 서버 요청 대신 클라이언트 데이터베이스 사용

웹 SQL 데이터베이스와 IndexedDB는 브라우저에 데이터베이스 저장 기능을 제공하여 서버 요청 수를 줄이기 위해 많은 애플리케이션 시나리오를 클라이언트 데이터베이스로 마이그레이션할 수 있습니다. LocalStorage와 sessionStorage는 간단한 데이터를 저장할 때 클라이언트 데이터베이스보다 빠르며 몇 가지 간단한 상태를 구현하고 진행 상황을 저장하는 데 사용할 수 있습니다.

구성 요소가 수백 개의 데이터(예: 친구 목록)를 관리하고 사용자 검색, 필터링 및 정렬을 지원해야 하는 경우 클라이언트 데이터베이스에 데이터 복사본을 저장하면 HTTP 요청 수를 효과적으로 줄일 수 있습니다. 자세한 안내를 위한 웹 SQL 데이터베이스 튜토리얼입니다.

팁 4: JavaScript 네이티브 API 사용

상위 버전의 JavaScript가 인기를 끌면서 대부분의 브라우저에서 직접 사용할 수 있는 Array 프로토타입과 같은 많은 새로운 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;
}

일반적으로 이러한 기본 메서드는 수동으로 루프를 작성하는 것보다 빠릅니다.

// 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.
var linksList = document.querySelector('#links');
var links = [];
['html5', 'css3', 'webgl'].forEach(function (value) {

  links.push(value.link('http://google.com/search?btnI=1&q=' + value + ' spec'));
});
linksList.innerHTML = links.join('');

// return a new array of all mathematical constants under 2
[3.14, 2.718, 1.618].filter(function (number) {
  return number < 2;
});

// you can also use these extras on other collections link nodeLists
[].forEach.call(document.querySelectorAll('section[data-bucket]'),
  function (elem, i) {
    localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});

기본 JSON.parse()를 사용하는 것이 json2.js보다 더 효율적이고 안전합니다.

기본 String.prototype.trim도 좋은 예입니다. 이러한 함수는 HTML5에 없으므로 널리 사용해야 합니다.

팁 5: 오프라인 앱뿐만 아니라 온라인 웹사이트에도 캐시 매니페스트를 사용하세요.

백엔드 관리 시스템 등의 사이트는 캐시를 활용하면 성능을 크게 향상시킬 수 있습니다.

캐시 매니페스트는 만료 설정에 비해 몇 가지 장점이 있습니다. 캐시해야 하는 파일을 명확하게 선언하고, 브라우저에서 해당 파일을 최적화할 수 있으며, 해당 파일을 사용하기 전에 로컬로 다운로드했을 수도 있습니다.

페이지의 기본 구조는 데이터에 따라 표시되는 콘텐츠가 변경된다고 볼 수 있습니다. 템플릿 가능한 HTML 구조는 캐시 매니페스트를 통해 캐시되며, 서버에서 JSON 데이터를 가져온 후 콘텐츠가 업데이트됩니다. 🎜> ​자세한 지침은 애플리케이션 캐시 튜토리얼을 참조하세요.

팁 6: 하드웨어 가속을 활성화하여 시각적 경험을 향상

일부 브라우저는 고속 애니메이션을 더 부드럽게 만들기 위해 GPU 가속을 사용할 수 있습니다. Firefox Minefield, IE9 및 Safari는 하드웨어 가속을 구현한다고 주장했습니다. Chromium은 또한 창 플랫폼에 대한 3D 변환 가속을 추가했습니다. 각 브라우저는 점점 더 많은 하드웨어 가속을 지원할 것입니다. .더 좋습니다.

하드웨어 가속이 지원되고 활성화되면 애니메이션, 회전, 크기 조정 및 불투명도가 콘텐츠를 다시 그리지 않고도 GPU에서 확실히 더 부드러워집니다. 그러나 페이지 레이아웃에 영향을 미치는 모든 작업은 감소합니다. 속도.

팁 7: 웹 작업자를 사용하여 많은 CPU 리소스가 필요한 작업을 수행하세요

웹 작업자에게는 두 가지 이점이 있습니다. 1) 빠릅니다. 2) 브라우저 응답을 차단하지 않습니다. 자세한 내용을 보려면 웹 작업자 슬라이드를 클릭하세요.

웹 작업자의 가능한 사용 시나리오:

긴 텍스트 형식

구문 강조

• 
  

이미지 처리

• 
  

사진합성

• 
  

대규모 어레이 처리

• 
  

  팁 8: HTML5 양식 속성 및 입력 유형
• HTML5는 검색, 전화, URL, 이메일, 날짜/시간, 날짜, 월, 주, 시간, 숫자, 범위, 색상 등을 포함한 일련의 입력 유형을 추가합니다. 이러한 기능을 지원하는 브라우저에서 기본 기능을 사용하고 js 플러그인을 사용합니다. 보충제로 제공됩니다.
  자리 표시자, 필수, 패턴 등은 페이지의 유용성과 성능을 크게 향상시킬 수 있습니다.

​HTML5 양식 정보를 클릭하시면 자세한 내용을 보실 수 있습니다.

팁 9: CSS3를 사용하여 이미지 사용 줄이기

이미지를 줄이면 HTTP 요청이 줄어들고, 페이지 크기가 줄어들며, 일반적으로 사용되는 속성은 다음과 같습니다.

선형 및 방사형 그래디언트

테두리 반경

• 
  

상자 그림자

• 
  

rgba

• 
  

변형

• 
  

CSS 마스크

• 
  

  일반적인 사용 시나리오에는 그라디언트를 통한 세련된 버튼, 기타 다양한 효과 복제

팁 10: XHR 대신 WebSocket을 사용하여 더 빠른 상호 작용과 더 적은 대역폭 제공

WebSocket은 Comet을 위해 설계되었으며 이를 사용하여 Comet을 구현하면 XHR보다 더 많은 이점을 얻을 수 있습니다.

원본 링크: http://www.html5rocks.com/en/tutorials/speed/quick/

위 내용은 웹 앱을 더 빠르게 만드는 HTML5 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!