이 기사에서는 HTML5와 CSS를 최대한 활용하여 웹 앱을 보다 원활하게 실행하는 방법에 중점을 둡니다.
쿠키의 가장 큰 단점은 규칙을 준수하는 모든 쿠키 데이터가 모든 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');
});WebSocket은 Comet을 위해 설계되었으며 이를 사용하여 Comet을 구현하면 XHR보다 더 많은 이점을 얻을 수 있습니다.
원본 링크: http://www.html5rocks.com/en/tutorials/speed/quick/
위 내용은 웹 앱을 더 빠르게 만드는 HTML5 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
