この記事では、JavaScriptがパフォーマンスを向上させるための一般的な手法について説明します。次のように、参照のために共有してください。
1。範囲に注意してください
スコープチェーンのスコープの数が増えると、現在のスコープ以外の変数にアクセスする時間も増加します。グローバル変数へのアクセスは、スコープチェーンを通過する必要があるため、ローカル変数にアクセスするよりも常に遅くなります。
1）。ローカル変数として関数で複数回使用されるグローバルオブジェクトを保存するためのグローバル検索を避けることは常に正しいです。
2）。それは独自のスコープを作成するステートメントでそれを避け、したがって、コードが実行されるスコープチェーンの長さを増加させます。
2。適切な方法を選択します
パフォーマンスの問題の一部は、問題を解決するために使用されるアルゴリズムまたは方法に関連しています。
1）。不要な属性検索を避けてください
コンピューターサイエンスでは、アルゴリズムの複雑さはOシンボルで表されます。最も単純で最速のアルゴリズムは、一定の値、つまりO（1）です。その後、アルゴリズムはますます複雑になり、実行に時間がかかります。一般的なJavaScriptアルゴリズムタイプは次のとおりです。
定数：値がいくらであっても、実行時間は一定です。一般に、それは単純な値と変数に保存されている値を表します。
対数：総実行時間は値の数に関連していますが、アルゴリズムを完了するために各値を取得する必要はありません。例：バイナリ検索
線形：総実行時間は、値の数に直接関連しています。例：配列内のすべての要素を反復します
正方形：総実行時間は値の数に関連しており、各値は少なくともn回取得する必要があります。例：ソートを挿入します
キューブ：総実行時間は値の数に関連しており、各値はnの少なくとも二乗を取得する必要があります。
変数と配列の使用は、オブジェクト上のプロパティにアクセスするよりも効率的です。オブジェクト上の属性の検索は、その名前のプロパティをプロトタイプチェーンで検索する必要があるため、変数または配列にアクセスするよりも時間がかかります。
一般的に、アルゴリズムの複雑さを減らすことができる限り、可能な限り最小化する必要があります。できるだけ多くのローカル変数を使用して、プロパティルックアップを価値検索に置き換えます。さらに、デジタル化された配列位置でアクセスできる場合、または名前付き属性（Nodelistオブジェクトなど）を使用できる場合は、配列位置を使用します。
2）。ループを最適化します
a。減損反復、多くの場合、最大値から始まり、ループ内の継続的に損なう反復剤がより効率的です。
b。簡略化された終了条件ごとに、各サイクルプロセスは終端条件を計算するため、可能な限り速く保証する必要があります。
c。単純化されたループボディループ本体が最も実行されるため、最大範囲で最適化されていることを確認してください。ループから簡単に削除できる集中的な計算がないことを確認してください。
d。テスト後ループのループで最も一般的に使用されるのは、事前テストループです。 Do-Wherileなどのテスト後ループは、条件の計算の初期終了を回避し、したがってより速くなります。
3）。ループの数が決定されたらループを展開し、ループを排除し、複数の関数呼び出しを使用すると速くなります。たとえば、有名なダフデバイス
4）。二重の説明を避けてください
JavaScriptコードがJavaScriptを解析したい場合、二重解釈のペナルティがあります。次の例：
eval（ "alert（ 'hello world！'）"）; //一部のコードは値を評価します
修理済み：
アラート（ 'Hello World'）;
var sayshi = new function（ "alert（ 'hello world！'）"）;
修理済み：
var sayshi = function（）{alert（ "hellow world！ '）;};setimeout（ "alert（ 'hellow world！'）"、500）;
修理済み：
setimeout（function）（{alert（ 'hellow world！'）;}、500）;5）。その他の方法
ネイティブの方法はより速いです - 可能な場合はいつでも、JavaScriptで自分で書き換える代わりにネイティブの方法を使用してください。ネイティブメソッドは、C/C ++などのコンパイルされた言語で記述されるため、JavaScriptよりもはるかに高速です。 JavaScriptで最も簡単に忘れられているのは、数学オブジェクトに見られる複雑な数学操作です。これらの方法は、SineやCosineなど、JavaScriptに記載されている他のどの方法よりもはるかに高速です。
スイッチステートメントはより高速です - 単一のスイッチステートメントに変換できる複雑なif -elseステートメントがある場合、より高速なコードを取得できます。また、スイッチステートメントをさらに最適化するために、最も可能性の高い順序で最も可能性の高い順序でケースステートメントを整理することもできます。
ビット演算子はより速いです - 数学的操作が実行されると、ビット操作はブールまたは算術操作よりも高速です。ビット操作の選択的変換は、複雑な計算のパフォーマンスを大幅に改善できます。たとえば、Modulo、Logic、Sum Logicでは、ビット操作を使用してそれらを置き換えることを検討できます。
3.ステートメントの数を最小限に抑えます
1）。複数の変数宣言
のように：
// 4ステートメント---それはvar count = 5; var color = "blue"; var値= [1,2,3]; var = new date（）;
最適化：
var count = 5、color = "blue"、values = [1,2,3]、noiw = new date（）;
この最適化は、ほとんどの場合、非常に簡単に行うことができ、単一の変数宣言よりもはるかに高速です。
2）。反復値を挿入します
のように：
var name = values [i]; i ++;
最適化：
var name = values [i ++];
3）。配列とオブジェクトリテラルを使用します
のように：
var値= new array（）; ---> var値= [];
var obj = new object（）; ---> var obj = {};
4. DOM相互作用を最適化します
1）。オンサイトの更新を最小限に抑えます
DOMパーツにアクセスする必要があると、表示されたページの一部になったら、ライブアップデートを実行しています。ライブアップデートと呼ばれる理由は、ページをユーザーのディスプレイにすぐに（オンサイト）更新する必要があるためです。単一の文字を挿入したり、クリップ全体を削除したりする場合でも、ブラウザが更新するために無数のサイズを再計算する必要があるため、パフォーマンスペナルティがあります。
例：
var list = document.getElementById（ "mylist"）; for（var i = 0; i <10; i ++）{var item = document.createelment（ "li"）; list.appendChild（item）; item.appendChild（document.createTextNode（ "item"+i））;}これにより、10のプロジェクトが追加され、この操作には合計20のオンサイト更新が必要です。以下は、ドキュメントフラグメントを作成する次の方法を改善するためです。
var list = document.getElementById（ "mylist"）; var fragment = document.createdocumentfragment（）; item.AppendChild（document.createTextNode（ "item"+i））;} list.appendchlid（fragment）;
この例では、すべてのプロジェクトが作成された後に行われるライブアップデートは1つだけです。ドキュメントフラグメントは、新しく作成されたプロジェクトを配置するための一時的なプレースホルダーとして使用されます。次に、AppendChild（）を使用して、すべてのアイテムをリストに追加します。 appendChild（）がドキュメントフラグメントに渡されると、フラグメント内の子ノードのみがターゲットに追加され、フラグメント自体が追加されないことを忘れないでください。
DOMを更新する必要がある後は、ドキュメントの断片化を使用してDOM構造を構築し、既存のドキュメントに追加することを検討してください。
2）。 innerhtmlを使用します
ページにDOMノードを作成するには2つの方法があります。CreateElement（）、AppendChild（）などのDOMメソッドを使用し、小さなDOM変更にInnenHTMLを使用すると、両方の方法の効率が類似しています。大規模なDOMの変更の場合、InnerHTMLを使用すると、標準のDOMメソッドを使用して同じDOM構造を作成するよりもはるかに高速です。同様に、innerhtmlを一度に使用すると、innerhtmlを複数回使用するよりもはるかに高速です。
3）。イベントプロキシを使用します（シンプル、省略）
4）。ノデリストに注意してください
NodeListへのアクセスの数を最小化すると、スクリプトのパフォーマンスが大幅に向上する可能性があります。
次のことが発生したときに、ノデリストオブジェクトが返されます。
a。 getelementsbytagname（）への呼び出しが作成されます
b。要素の子育てプロパティを取得します
c。要素の属性属性を取得します
d。 document.forms、document.imagesなどの特別なコレクションにアクセスしました。
NodeListオブジェクトを使用する場合、合理的な使用がコードの実行速度を大幅に改善することを理解する必要があります。
以前に導入された関数スロットルも非常に重要な側面です。特に、複数のループが非常にパフォーマンスを消費している場合、この方法は非常に便利です。
PS：JavaScript圧縮の場合、コードサイズを縮小することも、JavaScriptのパフォーマンスを改善する効果的な方法です。ここに2つの非常に実用的な圧縮ツールがあります。
JavaScript圧縮/フォーマット/暗号化ツール：
http://tools.vevb.com/code/jscompress
JSMINオンラインJS圧縮ツール：
http://tools.vevb.com/code/jsmincompress
JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptの切り替え効果とテクニックの要約」、「JavaScript検索アルゴリズムスキルの要約」、「JavaScriptアニメーション効果とテクニックの概要」、「Javascriptエラー、および「Javascriptデータ構造」の概要」の概要の要約の要約をご覧ください。 JavaScriptトラバーサルアルゴリズムとテクニック」、および「JavaScriptの数学的操作の使用法の要約」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。