はじめに
この記事では、HTML5 と CSS を最大限に活用して Web アプリをよりスムーズに実行する方法に焦点を当てます。
ヒント 1: Cookie の代わりに 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');
});ログイン後にコピー
ネイティブ JSON.parse() を使用する方が、json2.js よりも効率的かつ安全です。
ネイティブの String.prototype.trim も良い例です。これらの関数は HTML5 にはないので、広く使用する必要があります。
ヒント 5: キャッシュ マニフェストはオフライン アプリに使用するだけでなく、オンライン Web サイトにも適切に使用できます
バックエンド管理システムなどのサイトは、キャッシュを使用することでパフォーマンスを大幅に向上させることができます。
キャッシュ マニフェストには、Expires の設定に比べていくつかの利点があります。キャッシュする必要があるファイルを明確に宣言し、ブラウザーがファイルを最適化でき、使用する前にローカルにダウンロードされている可能性があります。
ページの基本構造はデータに応じて変化し、テンプレート化可能な HTML 構造は、サーバーから JSON データを取得した後に更新されます。
詳細な手順については、アプリケーション キャッシュのチュートリアルを確認してください。
ヒント 6: ハードウェア アクセラレーションを有効にして視覚エクスペリエンスを強化します
一部のブラウザは、高速アニメーションをよりスムーズにするために GPU アクセラレーションを使用する可能性があります。Firefox Minefield、IE9、および Safari は、ハードウェア アクセラレーションを実装すると主張しています。また、Chromium は、ウィンドウ プラットフォーム向けに 3D 変換アクセラレーションを確実にサポートするようになります。
ハードウェア アクセラレーションがサポートされ有効になっている場合、アニメーション、回転、スケーリング、不透明度はすべて、コンテンツを再描画することなく GPU 上で確実にスムーズになります。ただし、ページ レイアウトに影響を与える操作はすべて行われることに注意してください。速度を落としてください。
ヒント 7: 大量の CPU リソースを必要とする操作を実行するには、Web ワーカーを使用します
Web ワーカーには 2 つの利点があります: 1) 高速 2) ブラウザーの応答をブロックしない Web ワーカーのスライドをクリックして詳細を表示します。
Web ワーカーの考えられる使用シナリオ:
長いテキストの書式設定
画像を減らすと、HTTP リクエストが減り、ページ サイズが減り、メンテナンスが容易になります:
線形および放射状のグラデーション
以上がWeb アプリを高速化するための HTML5 のベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
