ホームページ > ウェブフロントエンド > jsチュートリアル > 高性能 Javascript コードを作成するための N ヒント_javascript のヒント

高性能 Javascript コードを作成するための N ヒント_javascript のヒント

WBOY
リリース: 2016-05-16 15:36:51
オリジナル
974 人が閲覧しました

長年にわたり、JavaScript は Web アプリケーション開発において重要な役割を果たしてきましたが、多くの開発者はパフォーマンスに関する知識を無視することが多く、特にコンピューター ハードウェアの継続的なアップグレードに伴い、開発者は Javascript のパフォーマンスの最適化についてますます懸念を抱いています。 Web ページの実行効率に明らかな影響を与えます。ただし、場合によっては、最適化されていない Javascript コードがユーザー エクスペリエンスに影響を与えることは避けられません。したがって、ハードウェアの性能が大幅に向上した現代においても、JavaScript コードを記述する際には、JavaScript の仕様に従い、ある程度の性能知識に注意を払うことができれば、コードの保守性の向上や性能の最適化に大きなメリットが得られます。 。

高パフォーマンスの Javascript コードを記述するためのいくつかの提案を示します:

1. 配列へのアクセスには for-in ループを使用しないようにします。ループには for ループを使用することをお勧めします。

function foo() {
   var i, b, c=[,,];
   for (i in c) {
    b = c[i];
    if(b === "")
     return b;
   }
  }
  //性能更好
  function foo() {
   var i, b, c=[,,];
   for (i=;i<c.length;i++) {
    b = c[i];
    if(b === "")
     return b;
   }
  } 
ログイン後にコピー

2. オブジェクト、特にリソースを消費する DOM アクセスをキャッシュすることをお勧めします:

 //c.length没有缓存,每次迭代都要计算一下数组的长度
  function foo() {
   var i, b, c=[,,];
   for (i=;i<c.length;i++) {
    b = c[i];
    if(b === "")
     return b;
   }
  }
  //性能更好,第一次将数组的长度缓存到变量l中,第二次及后续的循环无需计算数组长度
  function foo() {
   var i, b, c=[,,],l;
   for (i=,l=c.length;i<l;i++) {
    b = c[i];
    if(b === "")
     return b;
   }
  }

  //document.getElementById('info')没有缓存,每次都要遍历DOM
  function foo() {
   var e;
   document.getElementById('info').innerHTML="call ";
   document.getElementById('info').innerHTML="call ";
   
  }
  //性能更好,第二次无需访问DOM
  function foo() {
  var e=document.getElementById('info');
  e.innerHTML="call ";
   e.innerHTML="call ";
  }
ログイン後にコピー

3. 関数内であまり深くネストされた判断を行わないことをお勧めします:

//函数内嵌套判断语句过多
  function foo1() {
   var r={};
   r.data={};
   r.data.myProp=2;
   if (r) {
   if (r.data) {
    if (r.data.myProp) {
     //逻辑处理
    } 
    else {
     //逻辑处理
    }
   }
 }
 }
  //性能更好
 function foo2() {
   var r={};
   r.data={};
   r.data.myProp=2;
  if (!r) return;
  if (!r.data) return;  
  if (r.data.myProp) {
   //逻辑处理
  } else {
    //逻辑处理
  }
 }
ログイン後にコピー

4. 循環参照を回避し、メモリ リークを防ぎます:

//需要jQuery
 function foo(e,d) {
  $(e).on("click", function() {
    //对d进行逻辑处理
    cbk(d);
      } 
  });
 }
 //打破循环!
 function foo(e, d) {
  $(e).on("click", cbk(d));
 }
 function cbk (d) {
 //逻辑处理
 }  
ログイン後にコピー

5. 外部変数を汚染するため、関数内で宣言されていない変数を返さないことをお勧めします:

 function foo(a, b) {
  r = a + b;
  return r; //r未声明,则创建了一个全局变量
 }
ログイン後にコピー

6. var は複数行で記述することを推奨します。

 //自己测试结果是foo快,但也有一种观点是foo快
 function foo() {
  var c = ;
  var sum=;
  var d = ;
  var e;
 }
 function foo() {
  var c = ,sum=, d = , e;
 }
ログイン後にコピー
注: 実際には、1 つの関数の時間の差はわずかです。ここでは、パフォーマンスを比較するために複数回ループする累積時間を使用します。異なる PC 構成またはブラウザーでは、テスト結果に差異が生じる可能性があります。

上記の内容は、高パフォーマンスの Javascript コードを作成するための N つの提案であり、皆様のお役に立てば幸いです。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート