웹 앱을 더 빠르게 만드는 HTML5 모범 사례
- 巴扎黑원래의
- 2017-04-29 13:23:161394검색
소개
이 기사에서는 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 플러그인을 사용합니다. 보충제로 제공됩니다. 자리 표시자, 필수, 패턴 등은 페이지의 유용성과 성능을 크게 향상시킬 수 있습니다.
- 테두리 반경
- 상자 그림자
- rgba
- 변형
- CSS 마스크
-
일반적인 사용 시나리오에는 그라디언트를 통한 세련된 버튼, 기타 다양한 효과 복제
팁 10: XHR 대신 WebSocket을 사용하여 더 빠른 상호 작용과 더 적은 대역폭 제공
WebSocket은 Comet을 위해 설계되었으며 이를 사용하여 Comet을 구현하면 XHR보다 더 많은 이점을 얻을 수 있습니다.
원본 링크: http://www.html5rocks.com/en/tutorials/speed/quick/
위 내용은 웹 앱을 더 빠르게 만드는 HTML5 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.