Web アプリを高速化するための HTML5 のベスト プラクティス

はじめに

この記事では、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 ワーカーの考えられる使用シナリオ:

長いテキストの書式設定

構文の強調表示

• 
  

画像処理

• 
  

画像合成

• 
  

大規模な配列の処理
ヒント 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/

以上がWeb アプリを高速化するための HTML5 のベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。