Webサイトのパフォーマンスの向上に関するJavaScriptの提案（i）の中で、HTTPリクエストからページレンダリングまでのウェブサイトのパフォーマンスを改善するためにいくつかの提案が提案されています。この記事は、Steve Soundersの別の本、「高性能ウェブサイトの建設の高度なガイド」の別の本を学んだ後のJavaScriptのパフォーマンスの観点からの要約です。
JavaScriptのパフォーマンスは、高性能Webアプリケーションを実装するための鍵です
- スティーブサウンダー
1. JSスコープチェーンを利用します
スコープチェーン
JavaScriptコード（グローバルコードまたは関数）の一部を実行すると、JavaScriptエンジンは、実行コンテキストとも呼ばれるスコープを作成します。ページがロードされると、最初にグローバルスコープが作成され、その後、各関数が実行され、対応するスコープが確立され、スコープチェーンが形成されます。各スコープには対応するスコープチェーンがあり、チェーンのヘッドはグローバルスコープであり、チェーンの尾は現在の関数範囲です。
スコープチェーンの目的は、識別子を解析することです。関数が作成されると（実行されていません）、これ、引数、名前付きパラメーター、および関数内のすべてのローカル変数が現在の範囲に追加されます。 JavaScriptが変数xを見つける必要がある場合（このプロセスは変数解像度と呼ばれます）、まずスコープチェーンのチェーンの端からx属性、つまり現在のスコープがあるかどうかを検索します。発見されていない場合は、チェーンヘッド、つまりグローバルスコープチェーン、変数が見つからないまでスコープチェーンに沿って検索し続けます。このコードのスコープチェーンにx変数はないと考えられており、参照エラー（参照エラー）例外がスローされます。
スコープチェーンの深さを管理することは、わずかな作業でパフォーマンスを改善する簡単な方法です。スコープチェーンの意図しない成長のために、実行速度が遅いことを避けるべきです。
ローカル変数を使用します（ショートスコープチェーンは可能な限り）
スコープチェーンの概念を理解している場合、JavaScriptエンジンの解析変数がスコープチェーンの深さに関連していることが明らかです。明らかに、ローカル変数はチェーンの終わりにあり、アクセス速度が最も速いです。したがって、良い経験は次のとおりです。非ローカル変数が複数回使用されている場合、ローカル変数を使用してそれらを保存してください。
function chandediv（）{document.getElementById（ 'myDiv'）。className = 'chander'; document.getElementById（ 'myDiv'）。style.height = 150;}ここでは、MyDIV DOM要素が2回参照されます。参照をより高速にするために、ローカル変数で保存する必要があります。これを行うことの利点は、スコープチェーンを短縮するだけでなく、DOM要素の重複クエリを避けます。
function chaderiv（）{var mydivstyle = document.getElementById（ 'myDiv'）。style; mydiv.className = 300; mydiv.style.height = 150;}使用を避けてください（スコープチェーンを栽培しないでください）
一般に、コード実行中、関数のスコープチェーンは固定されていますが、機能のスコープチェーンを一時的に増加させる可能性があります。たとえば、以下のアクセスを容易にするためのローカル変数としてオブジェクトプロパティを表示するために使用されます。
var user = {name： 'vicfeel'、age：'23 '}; function showuser（）{var local = 0; with（user）{console.log（ "name" + name）; console.log（ "age" + age）; console.log（local）;}} showuser（）;この例では、ユーザーオブジェクトのすべてのプロパティを保存する、つまりコードを備えたスコープチェーンを保存するShowuser Scopeチェーンの最後に一時的なスコープが追加されます。このコードでは、チェーンの最後にある最初のオブジェクトから2番目のオブジェクトに変化するようなローカル変数は、識別子のアクセスを自然に遅くします。 With Statementが終了するまで、スコープチェーンは成長を再開します。この欠陥のため、キーワードを使用することを避けるようにしてください。
2合理的なフロー制御
他のプログラミング言語と同様に、JavaScriptにはいくつかのフロー制御ステートメント（ループ、条件など）があり、各リンクで適切なステートメントを使用すると、スクリプトの実行速度が大幅に向上する可能性があります。
迅速な状態判断
条件付き判断に関しては、避ける最初の方法：
if（value == 0）{return result0;} else if（value == 1）{return result1;} else if（value == 2）{return result2）{return result2;} else if（value == 3）{return result3）{value = 4）{return result4;} result7;}条件付き判断のためにこの使用方法の主な問題は、レベルが深すぎるということです。 Value = 7が必要な場合、時間はValue = 0よりもはるかに長く消費されます。
スイッチを使用して判断を下すためのより良い方法。
swithc（value）{case 0：return result0; case 1：return result1; case 2：return result2; case 3：return result3; case 4：return result4; case 5：return result 5; case 6：return result6; default：return result7;}これにより、読みやすさが向上するだけでなく、ifよりも速いクエリ時間が必要です。ただし、1つまたは2つの条件しかスイッチよりも速い場合の場合
JavaScriptには、条件を照会する別の方法があります。前の例は、値に応じて異なる値を返すことでした。これは、たまたま配列を使用してハッシュテーブルのマッピングクエリを実装できるようにすることでした。
//アレイvar results = [result0、result1、result2、result3、result4、result5、result6、result7]; // query result return results [value];
この配列の方法は、クエリ範囲が大きい場合により効果的です。これは、上限と下限を検出する必要がなく、クエリのインデックス値を入力するだけであるためです。その制限は、条件が一連の操作ではなく単一の値に対応することです。したがって、実際の状況を包括的に組み合わせ、適切な判断条件の方法を選択し、パフォーマンスを最大化する必要があります。
クイックサイクル
ループ用のJavaScriptには4つのループメソッドがあり、ループとフォーインループがあります。これは非常に一般的に使用されるリサイクル方法です。
var値= [1,2,3,4,5];
このコードの最も明白な最適化はvalues.lengthであることがわかります。各ループIは、値の長さと比較する必要があります。属性のクエリは、ローカル変数よりも時間がかかります。ループの数が大きい場合、時間がかかります。したがって、次のように最適化できます。
var値= [1,2,3,4,5]; var length = values.length; // local変数ストレージアレイの長さ（var i = 0; i <length; i ++）{process（values [i]）;}このコードは、総長さを追加する代わりに、ループ変数を0に最適化し続けることもできます。
var値= [1,2,3,4,5]; var length = values.length;
ここでは、ループの端が0と比較するように変換されるため、各ループの速度が高速になります。ループの複雑さに応じて、この単純な変化は以前よりも約50％の時間を節約できます。