この記事では、HTML5 と CSS を最大限に活用して Web アプリをよりスムーズに実行する方法に焦点を当てます。
Cookie の最大の欠点は、ルールに準拠したすべての Cookie データがすべての HTTP リクエストに含まれることです。これにより、特に XHR リクエストの応答時間が長くなります。HTML5 では Cookie の代わりに sessionStorage と localStorage を使用することをお勧めします。
この代替方法では、データをユーザーのローカル領域に永続的に保存できます。データは HTTP リクエストでは転送されないため、代わりに Cookie のみを使用します。 ヒント 2: JavaScript アニメーションの代わりに CSS トランジションを使用します CSS Transition により、パフォーマンスが向上し、コードが減り、メンテナンスと理解が容易になります。 ヒント 3: サーバーリクエストの代わりにクライアントデータベースを使用します Web SQL Database と IndexedDB は、ブラウザーにデータベース ストレージ機能を提供し、多くのアプリケーション シナリオをクライアント データベースに移行して、サーバー リクエストの数を減らすことができます。 LocalStorage と sessionStorage は、単純なデータ ストレージのクライアント データベースより高速であり、単純なステータスと進行状況の保存を実装するために使用できます。 コンポーネントが何百ものデータ (友人リストなど) を管理し、ユーザーの検索、フィルタリング、並べ替えをサポートする必要がある場合、データのコピーをクライアント データベースに保存すると、HTTP リクエストの数を効果的に減らすことができます。詳細なガイダンスについては、Web 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');
});
HTML5 では、検索、電話番号、URL、電子メール、日時、日付、月、週、時刻、数値、範囲、色などを含む一連の入力タイプが追加されています。これらの機能をサポートするブラウザーではネイティブ機能を使用し、JS プラグインを使用します。補足として。
WebSocket は Comet 用に設計されており、これを使用して Comet を実装すると、XHR よりも多くのメリットが得られます。 元のリンク: http://www.html5rocks.com/en/tutorials/speed/quick/
以上がWeb アプリを高速化するための HTML5 のベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
