HTML5 で Web サイトのフロントエンドのパフォーマンスを向上させる方法に関するサンプル コード分析

1. cookieを置き換えるためにウェブストレージを使用する

cookie の最大の問題は、cookie が毎回リクエストに従うことです。

HTML5 では、sessionStorage と localStorage を使用してユーザー データをクライアントに直接保存するため、HTTP リクエストのデータ量を削減できます。さらに、Web ストレージには、Cookie とは異なり、自分で記述する必要があるデータを操作するための 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;
 }

2. JavaScript アニメーションではなく CSS アニメーションを使用します

JS アニメーションではなく CSS アニメーションを使用します。一部のマシンは CSS アニメーションで GPU アクセラレーションを実行でき、JS ファイルのリクエストも削減できるためです。

 p.box {
   left: 40px;
   -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
           transition: all 0.3s ease-out;
 }
 p.box.totheleft { left: 0px; }
 p.box.totheright { left: 80px; }

3. クライアント データベースを使用する

Web SQLDatabase や IndexedDB などのクライアント データベースを使用して、HTTP リクエストの数を減らします。地域リストや友人リストなどのデータはクライアントに直接保存できます。通常、これらの種類の比較の方が高速であるため、sessionStorage と localStorage を使用することもできます。

4. JS の新機能を直接使用する

JS は、map、filter、forEach など、多くの新しいメソッドを導入しました。また、JSONもブラウザに直接埋め込まれており、json2.jsファイルを導入する必要はありません。

// 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.
 ['html5', 'css3', 'webgl'].forEach(function(value) {
   var linksList = document.querySelector('#links');
   var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
   linksList.innerHTML +=  newLink;
 });
 
 // Return a new array of all mathematical constants under 2.
 [3.14, 2.718, 1.618].filter(function(number) {
   return number < 2;
 });
 // [1.618]
 
 // You can also use these extras on other collections like nodeLists.
 [].forEach.call(document.querySelectorAll(&#39;section[data-bucket]&#39;), function(elem, i) {
   localStorage[&#39;bucket&#39; + i] = elem.getAttribute(&#39;data-bucket&#39;);
 });

5. HTML タグをキャッシュする

キャッシュを通じて HTML ファイルをクライアントにキャッシュします。ただし、これらのキャッシュされた HTML ファイルには構造のみがあり、コンテンツはありません。コンテンツは、JS を通じて JSON オブジェクトを操作して、ページにデータを入力する必要があります。このような HTML ファイルはテンプレートに相当します。

6. ハードウェア アクセラレーションを使用する

現在、主要なブラウザーでは GPU レベルのハードウェア アクセラレーションが有効になっており、特定の命令やハックを通じて有効にすることができます。たとえば、CSS で 3D 変換またはアニメーションを使用する場合、GPU ハードウェア アクセラレーションをオンにすることができます。

   .hwaccel { -webkit-transform: translateZ(0); }

7. WebWorker を使用して、CPU を大量に使用する操作を完了します

時間のかかる処理や CPU を大量に使用する処理を必要とする操作には、WebWorker を使用します。これは高速であるだけでなく、通常のブラウザーの操作に影響を与えません。 。

8. フォームの新機能を使用する

HTML フォームには、多くの新しい属性、要素、検証機能が追加されており、これらの新しい機能を使用することで、JS と CSS の関与を減らすことができます。

9. CSS スプライトを置き換えるには CSS3 を使用します

CSS3 を使用すると、おそらく 100 バイト程度の CSS で 2K 画像スプライトを置き換えることができ、リクエストの数も大幅に削減されます。

CSS3 のより一般的に使用される特殊効果には、角丸、グラデーション、シャドウ、透明度、変形、マスクなどが含まれます。

10. リアルタイム アプリケーションの場合は、WebSocket を使用して XHR を置き換えます

WebSocket は、Ajax ポーリングを置き換えるために最初に設計されたもので、Ajax よりも軽量で、使用する帯域幅が少ないことです。いくつかのレポートによると、WebSocket は Ajax よりも必要な送信量が約 30% 少なく、約 35 倍高速です。エリクソンが WebSocket のパフォーマンスをテストしたところ、ping コマンドの使用は WebSocket よりも 3 ～ 5 倍多く消費されることが判明したため、リアルタイム アプリケーションに非常に適しています。

以上がHTML5 で Web サイトのフロントエンドのパフォーマンスを向上させる方法に関するサンプル コード分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。