Javascriptコードの最適化

3245 ワード

クライアントのスクリプトは、あなたのアプリケーションをダイナミックかつダイナミックにすることができますが、ブラウザのJavaScriptに対する解釈は、効率の下につながる可能性があります.また、クライアント自体の違いによっては、性能の違いがあります.いくつかの提案と最善の実践を整理してJavascriptコードを最適化しました.
クラスを定義する方法
以下の例は非効率であり、毎回の実装baz.Barは、新しいfooのクローズド関数を作成します.
baz.Bar = function() {  
    // constructor body  
    this.foo = function() {    
        // method body  
    };
}
いい方法は?
baz.Bar = function() {
  // constructor body
};

baz.Bar.prototype.foo = function() {
  // method body
};
このように、いくつかのbaz.Barの例を作成しても、一つのfoo関数だけが作成されます.一方、クローズド関数の生成もありません.
初期化インスタンス変数
Place instance variable declaration/initialization on on the prototype for instance variables with value type(rather than reference type)initialization values(i.values of type number,Boolean,null,null,deunfing)は、このコードを初期化するたびに構築できます.(ただし、インスタンス変数が構築関数の着信パラメータに依存している場合、または構築時の状態に依存している場合は、その提案には適用されない)
foo.Bar = function() {  
  this.prop1_ = 4; 
  this.prop2_ = true;  
  this.prop3_ = [];  
  this.prop4_ = 'blah';
};
次のような形に変えるべきです.
foo.Bar = function() {
  this.prop3_ = [];
};

foo.Bar.prototype.prop1_ = 4;

foo.Bar.prototype.prop2_ = true;

foo.Bar.prototype.prop4_ = 'blah';
閉嚢の陥没を避ける
クローズドはJavascriptの中の一つの強大で有用な特性です.同時に、いくつかの欠点もあります.
  • クローズドが最も一般的なメモリリークの原因です.
  • は、閉じたパケットを使用しないで固有の関数を作成するよりもはるかに遅く、静的な関数を再利用する方がより遅いということです.
    function setupAlertTimeout() {
      var msg = 'Message to alert';
      window.setTimeout(function() { alert(msg); }, 100);
    }
    
    比較的早い:
    function setupAlertTimeout() {
      window.setTimeout(function() {
        var msg = 'Message to alert';
        alert(msg);
      }, 100);
    }
    
    もっと速く
    function alertMsg() {
      var msg = 'Message to alert';
      alert(msg);
    }
    
    function setupAlertTimeout() {
      window.setTimeout(alertMsg, 100);
    }
    
  • クローズドは、スコープの長さを増加させます.ブラウザが属性を解析する場合、スコープのレベルごとに照会しなければなりません.以下の例
  • var a = 'a';
    
    function createFunctionWithClosure() {
      var b = 'b';
      return function () {
        var c = 'c';
        a;
        b;
        c;
      };
    }
    
    var f = createFunctionWithClosure();
    f();
    
    fが実行されると、cより早く、bよりも速いです.ieでは、クローズドされた情報を使用して、IE+JScript Performance Recommandations Part 3:JavaScript Code inefficienciesを閲覧することができます.aの使用を避ける
    コードの中でwithと同一視されないようにします.機能が悪いです.他のスコープで変数を検索するのが難しくなります.ウェブサイトのアプリケーションで最もよく使われているメモリの漏洩はJavaScriptスクリプトエンジンとブラウザのC++オブジェクトがDOMのサイクル参照を実行しているからです.(例えば、between the JavaScript engine and Internet Explorer's COM infraastructure、or between the JavaScript engine and Firefox XCOM infrastucture)
    ブラウザのメモリの漏洩を避ける
    webアプリケーションでは、メモリの漏洩が一般的な問題です.これは、大きなパフォーマンスの問題を引き起こす可能性があります.ウェブサイトのアプリケーションによって、ブラウザのメモリが増加し、ユーザーのシステムの他の部分が遅くなります.
    ここではメモリ漏れを避けるためにいくつかの経験則があります.
    イベント処理をイベント管理システムに結びつける
    最も一般的な循環参照のタイプは、「DOM element-」event handler-->closure scope->DOMです.このような問題を避けるために、良いテストを経たイベント管理システムを選択して、イベント処理を結びつけるべきです.例えば、Google doctype、DojoまたはJquery.
    未完
    [原文のリンク](https://developers.google.com/speed/articles/optimizing-javascript#Initializing instance variables)