フロントエンドのパフォーマンスを最適化する9つの方法

最新のブラウザがより多くの機能をサポートするようになり、Web業界がモバイルデバイスに急速に移行しているため、ユーザーがサイトをロードするのに時間がかからないコンパクトで最適化されたコードを記述する必要がありました。 フロントエンドには、最適なパフォーマンスを確保するために使用できる多くの単純なコード戦略と規則が含まれているという点で優れています。 この記事では、コードの最適化に役立つ9つの簡単なヒントをまとめました。



すぐに言っておくと、いくつかのトリックはインターネットの西側の広がりで私たちによってスパイされ、いくつかは私たちによって追加されたものです。 いずれにせよ、RuNetにはそのような資料はありませんでした。 多くの場合、大規模なシステムを作成してダウンロード速度を最適化する必要があるため、バイトごとに戦おうとします。 ここから、彼らはこの重要なトピックについて書くことにしました。

1.要素への大量注入の代わりにDocumentFragmentsまたはinnerHTMLを使用します

ページの読み込み後、DOM構造の構築などの操作を行うと、ブラウザの負荷が増加します。 ブラウザのパフォーマンスは向上しますが、DOMツリーの構築は遅いため、これらのニュアンスを知ることは、ページの読み込み速度を上げるのに役立ちます。 そのため、複雑な構造DOMツリーの作成を最小限に抑えることが重要です。



たとえば、ページ内にul要素があり、JSONリストアイテムを取得するためのAJAX呼び出し後にJavaScriptを介して変更されます。 多くの場合、開発者は次のようなことをします。

var list = document.querySelector('ul'); ajaxResult.items.forEach(function(item) { //    li var li = document.createElement('li'); li.innerHTML = item.text; //        , // :  ,    .. //   li    ul list.apppendChild(li); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記のコードはulを要素で埋める間違った方法を示しています-DOMツリーを補完する速度は遅くなります。 本当にdocument.createElementを使用し、要素をツリーノードとして扱いたい場合は、代わりにDocumentFragementを使用する方が効率的です。



DocumentFragementは、その子供向けのいわゆる「ミニペアレント」、「クラウドストレージ」です。 この例では、DocumentFragementはDOMの外部にある目に見えないul要素と見なす必要があります。 これにより、DOMに入力されるまでノードを仮想的に保存できます。 初期サンプルコードは、DocumentFragementを使用して次のように最適化されます。

 var frag = document.createDocumentFragment(); ajaxResult.items.forEach(function(item) { //    li var li = document.createElement('li'); li.innerHTML = item.text; //        , // :  ,    .. // *    ,   * frag.appendChild(li); }); //   ,     DocumentFragment document.querySelector('ul').appendChild(frag);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

別のDocumentFragementに子を追加してから、このフラグメントを親リストに追加することは、1つのDOM操作でのみ使用されます。 したがって、大量展開よりもはるかに高速であることがわかります。 ノードなどのリストアイテムを使用する必要がない場合は、文字列を使用してHTMLを作成する方がより有益です。

 var htmlStr = ''; ajaxResult.items.forEach(function(item) { //   htmlStr += '<li>' + item.text + '</li>'; }); //     innerHTML document.querySelector('ul').innerHTML = htmlStr;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、innerHTMLを介して作成された文字列を導入しても、DocumentFragmentメソッドよりも、DOM操作は1つしかなく、コードは少なくなります。

2.頻繁に実行されるイベント/メソッド

ほとんどの作業では、ユーザーの操作中に頻繁に発生するイベントの処理を追加する必要があります。 たとえば、ウィンドウのサイズ変更またはonmouseoverイベント。 イベントデータの処理がリソースを大量に消費する場合、ブラウザに大量のダウンロードを行うことができます。これにより、ユーザー側に悪い結果がもたらされます。 これがデバウンス方法の由来です。 デバウンスは、指定された時間間隔内で関数が実行される回数を制限します。 以下は、デバウンス機能の使用例です。

  //    UnderscoreJS function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; } //    resize       300  window.addEventListener('resize', debounce(function(event) { //   resize (  ) }, 300));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Debounceメソッドは、応答をラップする関数を返し、その実行速度を2番目の引数で指定された制限に制限します。 これで、恒久的な回答はユーザーのブラウザに損害を与えることができなくなります。

3.静的キャッシュ、Webストレージ内の必須ではないコンテンツ

WebストレージタイプのAPIは、開発者が長年使用してきたCookie APIの大幅な機能強化と簡素化です。 メモリを操作して重要でないデータを保存するときに使用できる戦略の1つは、静的コンテンツでした。 これには、HTMLスニペット、AJAXを使用してダウンロードされた記事のコンテンツ、および複数回リクエストする必要のある他のさまざまなメソッドが含まれます。 以下は、Webストレージを操作するための小さなJavaScriptコードです。

 this[key] = value; } }; return { get: function(key) { return this.isFresh(key); }, set: function(key, value, minutes) { var expDate = new Date(); expDate.setMinutes(expDate.getMinutes() + (minutes || 0)); try { cacheObj.setItem(key, JSON.stringify({ value: value, expires: expDate.getTime() })); } catch(e) {} }, isFresh: function(key) { //    false var item; try { item = JSON.parse(cacheObj.getItem(key)); } catch(e) {} if(!item) return false; //   return new Date().getTime() > item.expires ? false : item.value; } } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このプラグインは、基本的なgetおよびsetメソッドを使用するか、isFreshメソッドを使用して、保存されている値が関連するかどうかを確認します。

  require(['storage'], function(storage) { var content = storage.get('sidebarContent'); if(!content) { //  AJAX     // ...        storage.set('sidebarContent', content, 60); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、サーバーに頻繁に繰り返されるリクエストを取り除きます。 動的ではないが頻繁に要求される可能性のある素材についてサイトを分析します。 この方法を使用して、サイトのパフォーマンスを改善します。

4. curl.jsを使用する

リソースのロードをブロックせず、ページのロード時間を短縮し、コンテンツをリロードせずにロードできるように、XMLHttpRequest（AJAXで許可されるオブジェクト）のおかげでリソースの非同期ロードが一般的になりました。



ここでは素晴らしいJohn Hannプラグインcurl.jsが使用されます。 curlローダーは典型的な非同期ローダーですが、他の構成オプション、便利なプラグインなどが少しあります。 curl.jsの使用例：

 //   curl(['social', 'dom'], function(social, dom) { dom.setElementContent('.social-container', social.loadWidgets()); }); //  ,   Google Analytics define(["js!//google-analytics.com/ga.js"], function() { //  Google Analytics  return { trackPageView: function(href) { _gaq.push(["_trackPageview", url]); }, trackEvent: function(eventName, href) { _gaq.push(["_trackEvent", "Interactions", eventName, "", href || window.location, true]); } }; }); //   JavaScript     curl(['js!//somesite.com/widgets.js']); //  JavaScript and CSS    curl(['js!libs/prism/prism.js', 'css!libs/prism/prism.css'], function() { Prism.highlightAll(); }); //  a URL ( an AJAX ) curl(['text!sidebar.php', 'storage', 'dom'], function(content, storage, dom) { storage.set('sidebar', content, 60); dom.setElementContent('.sidebar', content); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

単純な非同期ローダーの代わりにこのメソッドの使用を開始すると、違いはすぐに顕著になりますが、さらに重要なことは、ユーザーにこの違いが見えることです！



たとえば、CSSソーシャルクラスを持つdivが存在する場合にのみ、Twitter、Facebook、およびGoogle Plusウィジェットをダウンロードします。 このブロックが利用できない場合、ウィジェットは出荷されません。 したがって、「チェック-ダウンロードする前に必要な場合-ロードする」という原則を使用すると、ユーザーは完全に不要な数キロバイトをダウンロードする必要がなくなります。

5.文字列連結の代わりにArray.prototype.joinを使用します

Array.prototype.joinを使用した1つのクライアント側のマイクロ最適化は、通常の連結を置き換えます。 たとえば、段落1（上記を参照）では、基本文字列の連結が使用されました。 そして、これはこの最適化の後にどのように見えるかです

 var items = []; ajaxResult.items.forEach(function(item) { //   items.push('<li>', item.text, '</li>'); }); //     innerHTML document.querySelector('ul').innerHTML = items.join('');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

6.可能な限りCSSアニメーションを使用する

JQueryやMooToolsなどのJavaScriptライブラリの成長により、複雑なアニメーションが発生したと言えます。 現在、多くの開発者はJavaScriptを使用して要素をアニメーション化していますが、それぞれのブラウザーは変換とキーフレームを介してCSSアニメーションをサポートしています。



CSSアニメーションは、JavaScriptアニメーションよりも効果的です。 CSSアニメーションには、（通常）コードがはるかに少ないという利点もあります。 多くのCSSアニメーションはGPUで処理されるため、よりスムーズです。 例：

 .myAnimation { animation: someAnimation 1s; transform: translate3d(0, 0, 0); /*  */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同様のCSSアニメーションプロパティは、サブピクセル補間を使用してアニメーションのパフォーマンスと品質を向上させます。 このようなアニメーションは、グラフィックエンジンが関与しているため、プロセッサが実行しやすいため、モバイルデバイスにとって非常に重要です。 ただし、CSSアニメーションを使用し、jsを介してコントロールを接続することが最も受け入れられます。 たとえば、アニメーションルールがCSSで記述されている場合、JavaScriptを使用して入力パラメーター（色、背景、サイズなど）を変更します

7.イベントの委任を使用する

任意の数のliの子を含むことができるulの順序付けられていないリストを想像してください。各liはマウスのクリックで何かをしなければなりません。 個々の要素にイベントハンドラーを追加できますが、要素が頻繁に追加または削除されるとどうなりますか？ 要素自体だけでなく、イベントハンドラーの追加と削除にも対処する必要があります。 ここでイベントの委任が必要になります。



イベント委任により、親の単一のイベントハンドラをホストする代わりに、個々の要素にイベントハンドラを追加する必要がなくなります。 このイベントが発生すると、event.targetは、このイベントの処理機能を呼び出すための条件が満たされているかどうかを確認します。



以下は、何が起こっているかを示す非常に簡単な例です。

 //         click... document.querySelector('#parent-list').addEventListener('click', function(e) { // e.target  ! //      if(e.target && e.target.tagName == 'LI') { //   ! ! } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてのJavaScriptフレームワークは、一致するデリゲートセレクターを提供します。 実際には、親にイベントハンドラーを設定することにより、イベントハンドラーを別の要素に配置することを避けています。 この方法は、より効率的で低コストです。

8. SRCの代わりにデータURLを使用する

ページの読み込み速度は、スプライトの使用とコンパクトなコードの作成に直接依存します。 このページから送信されるリクエストの数もパフォーマンスに影響します。 リクエストを最小化すると、サイトの読み込みが速くなり、リクエストを排除する方法の1つは（スプライトを使用する以外に）画像SRC属性の代わりにデータURLを使用することです：

 <!—… --> <img src="/images/logo.png" /> <!-- … --> <img src="data: image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2 JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fH x8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fH ...." />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

もちろん、ページサイズは大きくなりますが、待ち時間とサーバーへのリクエストの数は減少します。 ほとんどのブラウザは、CSSファイル（背景画像用）でデータURLをサポートするようになったため、この方法は全体として広く使用できます。

9.メディアクエリを使用して、異常なサイズの背景画像を読み込みます。

前の段落では、サイトの読み込みを高速化するための画像スプライトの使用について述べました。 しかし、背景画像、検索アイコンなど、画像を拡大縮小する必要がある適応型Webサイトについてはどうでしょうか。 このような操作をスプライトで実行するのはかなり不便であり、多くの時間がかかります。 これは、メディアクエリが助けになる場所です。



CSS サポートのサポート範囲は広く、CSSメディアクエリはCSSのロジックに近いものです。 CSSメディアクエリは、デバイスのCSSプロパティ（通常は画面の幅）を構成（制御）するために最もよく使用されます。 この方法を使用して、要素の幅または浮動位置を頻繁に変更します。 この方法に基づいて背景画像を変更してみませんか？

 /*   Desktop */ .someElement { background-image: url(sunset.jpg); } @media only screen and (max-width : 1024px) { .someElement { background-image: url(sunset-small.jpg); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記のスニペットは、ユーザーがモバイルデバイスを使用している場合（アスペクト比ではなくファイルサイズを意味する）、より小さい画像をロードします。 このように、小さなスプライトを描画するだけで十分です。これにより、プログラムで画像を操作したり、モバイルデバイス用にスプライトをカットしたりする必要がなくなります。



ほとんどの国では、使用するデータに料金がかかります（無制限ではありません）。つまり、読み込み時間を短縮することでお金を節約できます。



小さな更新、大きな成功



多くの場合、開発者はユーザーについて最初に考えるのではなく、自分自身と自分のコードスタイルを優先します。 ユーザーの快適さを向上させるために多くの小さな更新が組み込まれているため、ダウンロードの最適化をすべて行うことでサイトの印象が改善されます。 Googleは、ブラウザのかなり便利な拡張機能をリリースしました。これは、サイトの読み込み速度を分析し、ページの読み込みを増やすために他に最適化できるものを見つけるのに役立ちます。 この拡張機能はPageSpeed Insightsと呼ばれます。 標準の開発者パネルから使用できます。 このウィジェットは、ポータルの最小限の分析を表示し、ポータルの最適化に関するヒントを提供します。例：







いずれにせよ、サイトを可能な限り最適化する必要があります。 動作が速くなるほど、より多くのユーザーが満足するようになり、サイトの収益も増えます。 残念ながら、誰もがそれについて考えているわけではありません。 これはオンデマンドでも見ることができます：使いやすさまたはバックエンドの監査は私たちにしばしば注文され、誰もフロントエンドの監査を要求することはめったにありませんが、それは難しくはなく、改善のための良い分野を提供します。