JavaScript のパフォーマンスを向上させるためのいくつかの知識ポイントの詳細な説明と概要

JavaScript のパフォーマンスを向上させるためのいくつかの知識ポイントの詳細な要約:

私は少し前に時間をかけて「High Performance JavaScript」という本のほとんどを読み、その後、幸いにも最も忙しい週にプロジェクトに取り組み始めました。すでにそれを乗り越えています。時間が足りなかったので、今月はあまり勉強ノートを書けませんでしたが、最も大変な一週間の後、ここ 2 日間は真夜中の読書に明け暮れていました…生きているうちにこの本をついに閉じてしまいました。

読み終わったら、何かを学ばなければなりません。まずこの本の感想を述べさせていただきますと、全体的には内容は良いのですが、少し古い感じがします（フロントエンド初心者なので、私のレベルが限界で本当の意味が理解できていないのかもしれません）。 。この本を読む過程で、私はテスト用のコードもたくさん書きました。また、この本で提唱されている書き方と元の一般的な書き方の実行でブレークポイントの追跡も行い、問題が発生する可能性があることを理解しました。もちろん、ブレークポイントを設定して実行を実行しても表示されない場合は、どうすることもできません。この本の知識点については、私が個人的にお勧めする知識点のいくつかを簡単に要約します。もちろん、気に入らない場合は批判しないでください。

jsファイルの読み込み位置について

HTMLファイルでは、

領域と領域に3f1c4e4b6b16bbbd69b2ee476dc4f83aタグを追加できます。 JavaScript の実行と UI レンダリングがシングルスレッドであるため、js ファイルが読み込まれると、その後のページの解析プロセスがブロックされ、ページは js ファイルが完全に読み込まれて実行されるまで待機してから、実行を続行します。操作。その後、ページが空白になったり、スタックしたりするという問題が発生します。フロントエンド開発者としては、要件を実現するだけでなく、高品質のユーザー エクスペリエンスを提供することが重要です。次に、この問題を解決するために、私が考えた 2 つの解決策を紹介します:

1. js ファイルにロードしてコンパイルする必要があることを示す特別な要件がない場合。ページがレンダリングされる前に、js ファイルを 36cc49f0c466276486e50c850b7e4956 タグの前 (つまり、ページに表示されるすべてのコンテンツの後) に配置し、css ファイルを 93f0f5c25f18dab9d176bd4f6de5d30e 領域に配置します。乱雑なレイアウトのページを誰も見たくありません)。これを行うと、ユーザーは空白のページではなくレイアウト ページを表示できるようになります。データは js リクエストを通じてロードする必要があると指摘する人もいます。データのロードを並べ替えることができ、緊急に必要なインターフェイスを最初に実行し、それほど必要でないインターフェイスを延期したり、同時に単純なロード アニメーションやプロンプトを作成したりできます。

2. ページのコンテンツをより適切に表示するために、これらの JS ファイルを最初に実行する必要があると指定している場合は、最初の JS またはページに、興味深いまたはかわいいアニメーション シーンとなる小さな読み込みアニメーションを配置します。これにより、ユーザーの待ち時間の退屈も回避できるため、ユーザーは読み込みアニメーションにもっと興味を持つようになり、プロジェクトのユーザー エクスペリエンスが向上する可能性があります。

最後の推奨事項: ユーザー エクスペリエンスを向上させるために、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグをできるだけ 36cc49f0c466276486e50c850b7e4956 タグの前に配置します。

js ファイルのマージについて

多くのチーム開発では、開発プロセス中に全員が共同でコードを作成するのがより便利になるように、異なる機能を持つコード ブロックを異なる js ファイルに配置することがあります。長いファイルではなく、フォルダーまたはファイルに対応する方法を見つけるだけで済みます。これにより、確かにチームの開発効率が向上し、新しい人が参加した後の二次開発やメンテナンスが容易になります。では、この問題をページのパフォーマンスに反映させてみてはどうでしょうか?本で述べられているように、これがまさに問題です。各 HTTP リクエストには追加のパフォーマンス オーバーヘッドが伴うため、100 KB ファイルを 1 つダウンロードする方が、25 KB ファイルを 4 つダウンロードするよりも高速になります。

25 KB ファイルを 4 つダウンロードする方が高速です。開発プロセス中に各ファイルを区別することには大きな利点があるため、マージの問題は開発が完了した後に対処されると思います。現在ではフロントエンドツールがたくさんあるので、何でも使用してください。ファイルの読み込み時に、遅延読み込みと非同期読み込みに使用される defer 属性と async 属性を使用することもできます。最新のブラウザでは、ほとんどのブラウザで既に defer 属性がサポートされています。まだ使い方に慣れていないので、特に問題が発生するかは分かりません。興味のある友人は、この知識ポイントを自分でググってみてください。ここで簡単に説明します。

今日のフレームワークのほとんどは、遅延読み込みとオンデマンド読み込みもサポートしています。

データ アクセスの高速化

ブラウザーの場合、識別子が深くなるほど、読み取りと書き込みが遅くなります (プロトタイプ チェーンにも同じことが当てはまります)。これを理解するのは難しいことではありません。簡単な例えで言えば、食料品店が家から遠いほど、醤油を作るのに時間がかかります。醤油を作るのに時間がかかると、野菜が減ってしまうのです。焼けます -.-~

現在の関数内で変数値を複数回使用する必要がある場合、最初にローカル変数を使用してそれを保存できます:

  //修改前
  function showLi(){
      var i = 0;
      for(;i<document.getElementsByTagName("li").length;i++){    //一次访问document
          console.log(i,document.getElementsByTagName("li")[i]);  //三次访问document
      };
  };
  //修改后
  function showLi(){
      var li_s = document.getElementsByTagName("li");  //一次访问document
      var i = 0;
      for(;i<li_s.length;i++){
          console.log(i,li_s[i]);  //三次访问局部变量li_s
      };
  };

DOM 操作の最適化

DOM 操作は JavaScript の実行よりもはるかに多くのパフォーマンスを消費しますが、DOM での操作を避けることはできませんが、この操作によるパフォーマンスの消費を可能な限り削減することができます。

この問題をコードを通して説明してみましょう:

  function innerLi_s(){
      var i = 0;
      for(;i<20;i++){
          document.getElementById("Num").innerHTML="A"; //进行了20次循环，每次又有2次DOM元素访问：一次读取innerHTML的值，一次写入值
      };
  };

上記の方法の適応:

  function innerLi_s(){
      var content ="";
      var i = 0;
      for(;i<20;i++){
          content += "A";  //这里只对js的变量循环了20次
      };
      document.getElementById("Num").innerHTML += content;  //这里值进行了一次DOM操作，又分2次DOM访问：一次读取innerHTML的值，一次写入值
  };

Domの再描画と再配置を削減します

要素のレイアウトまたは追加、削除、修正の変更コンテンツの変更やブラウザのウィンドウ サイズの変更によりリフローが発生し、フォントの色や背景色の変更により再描画が発生します。
以下のコードに類似した操作については、最新のブラウザのほとんどが最適化されている(リフロー1回に最適化されている)と言われています:

  //修改前
  var el = document.getElementById("p");
  el.style.borderLeft = "1px"; //1次重排版
  el.style.borderRight = "2px"; //又1次重排版
  el.style.padding = "5px"; //还有1次重排版
  //修改后
  var el = document.getElementById("p");
  el.style.cssText = "border-left:1px;border-right:2px;padding:5px"; //1次重排版

複数の操作の場合、以下の3つの方法でもリフローと再描画の回数を減らすことができます。 :

1. Dom は最初に非表示になり、操作後に 2 回表示され、再配置されます (一時的な表示: なし)

2.document.createDocumentFragment() は処理用の文書フラグメントを作成し、処理後のページに追加されます。操作と 1 つの再配置

3.var newDOM = oldDOM.cloneNode(true) は DOM のコピーを作成します。コピーを変更した後、oldDOM.parentNode.replaceChild(newDOM, oldDOM) は元の DOM を上書きし、それを 2 回再配置します

最適化。ループの説明

これは多くの人が好むものになるはずです。書き方はわかっているので、簡単に実行してください (後でコード + コメントの形式で説明します)~

  //修改前
  var i = 0;
  for(;i<arr.lengthli++){  //每次循环都需要获取数组arr的length
      console.log(arr[i]);
  }
  //修改后
  var i = 0;
  var len = arr.length;  //获取一次数组arr的length 
  for(;i<len;i++){
      console.log(arr[i]);
  }
  //or
  var i = arr.length;;
  for(;i;i--){
      console.log(arr[i]);
  }

バイナリを適切に使用してください

例: モジュロ 2、偶数の最下位ビットは 0、奇数の最下位ビットは 0、1 とのビット単位の AND 演算の結果は 0、奇数の最下位ビットは 1 、1 とのビット単位の AND 演算の結果は 1 になります。

コードは次のとおりです:

  .odd{color:red}
  .even{color:yellow}

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

  var i = 0;
  var lis = document.getElementsByTagName("li");
  var len = lis.length;
  for(;i<len;i++){
      if(i&1){
          lis[i].className = "even";
      } else{
          lis[i].className = "odd";
      }
  };

最近のブラウザは良い仕事をしていますが、これがコードの品質の追求だと感じています。そして、おそらく 1 つや 2 つの点に注意を払わなくてもパフォーマンスに大きな影響はありませんが、複数の点から最適化すると、質的な飛躍が起こる可能性があります~

以上がJavaScript のパフォーマンスを向上させるためのいくつかの知識ポイントの詳細な説明と概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。