JavaScriptは非常に柔軟な言語です。好きなようにさまざまなスタイルのコードを書くことができます。さまざまなスタイルのコードは、必然的に実行効率の違いにつながります。開発プロセス中に、コードパフォーマンスを改善するための多くの方法にさらされます。問題を回避しやすい一般的で簡単に整理しましょう。
JavaScript自身の実行効率
JavaScriptのスコープチェーン、閉鎖、プロトタイプ継承、評価、およびその他の機能は、さまざまな魔法の機能を提供しながら、さまざまな効率の問題をもたらします。不注意に使用すると、非効率的な実行につながります。
1。グローバルインポート
エンコードプロセス中に、いくつかのグローバル変数（ウィンドウ、ドキュメント、カスタムグローバル変数など）を使用します。 JavaScript Scopeチェーンを知っている人なら誰でも、ローカルスコープでグローバル変数にアクセスするには、トップレベルのスコープまでレイヤーごとにスコープチェーンレイヤー全体を通過する必要があり、ローカル変数のアクセス効率がより速く、より高くなることを知っています。したがって、ローカルスコープで高頻度でいくつかのグローバルオブジェクトを使用する場合、例えば次のようにローカルスコープにインポートできます。
コードコピーは次のとおりです。
// 1。パラメーターとしてモジュールに渡します
（function（window、$）{
var xxx = window.xxx;
$（ "＃xxx1"）。xxx（）;
$（ "＃xxx2"）。xxx（）;
}）（window、jquery）;
// 2。ローカル変数への保存
関数（）{
var doc = document;
var global = window.global;
}
2。評価とクラスの評価の問題
私たちは皆、evalがJSコードとして文字列を使用して実行および処理できることを知っています。 evalを使用して実行されたコードは、evalを使用していないコードの100倍以上遅いと言われています（特定の効率をテストしていませんが、興味のある人はそれをテストできます）
JavaScriptコードは、実行前に同様の「プリコンパイル」操作を実行します。まず、現在の実行環境にアクティブオブジェクトを作成し、VARでアクティブオブジェクトのプロパティとして宣言された変数を設定しますが、現時点ではこれらの変数の割り当ては未定義であり、関数で定義された関数もアクティブオブジェクトのプロパティとして追加され、その値は機能の定義です。ただし、「評価」を使用する場合、「eval」のコード（実際には文字列）はコンテキストを事前に識別できず、事前に解析して最適化することはできません。つまり、事前にコンパイルされた操作を実行できません。したがって、そのパフォーマンスは大幅に削減されます
実際、人々は現在evalを使用することはめったにありません。ここで話したいのは、2種類の評価（新しい関数{}、SetimeOut、SetInterver）のシナリオです
コードコピーは次のとおりです。
sittimtout（ "alert（1）"、1000）;
SetInterver（ "Alert（1）"、1000）;
（新しい関数（ "alert（1）"））（）;
上記のタイプのコード実行効率は比較的低いため、匿名の方法またはSettimeOutメソッドへの参照を直接渡すことをお勧めします。
3。閉鎖が終了した後、参照されなくなった変数がリリースされます。
コードコピーは次のとおりです。
var f =（function（）{
var a = {name： "var3"};
var b = ["var1"、 "var2"];
var c = document.getElementByTagname（ "li"）;
// ****その他の変数
// ***いくつかの操作
var res = function（）{
アラート（a.name）;
}
RESを返します。
}）（）
上記のコードの変数fの返品値は、即時実行関数で構成される閉鎖で返される方法です。この変数は、この閉鎖のすべての変数（a、b、cなど）への参照を保持します。したがって、これらの2つの変数は常にメモリ空間に存在します。特に、DOM要素への参照は多くのメモリを消費します。 resの変数aの値のみを使用します。したがって、閉鎖が戻る前に、他の変数を解放できます。
コードコピーは次のとおりです。
var f =（function（）{
var a = {name： "var3"};
var b = ["var1"、 "var2"];
var c = document.getElementByTagname（ "li"）;
// ****その他の変数
// ***いくつかの操作
//閉鎖が返される前に使用されなくなった変数をリリースします
b = c = null;
var res = function（）{
アラート（a.name）;
}
RESを返します。
}）（）
JS動作DOMの効率
Web開発プロセス中、フロントエンドの実行効率のボトルネックは、多くの場合、DOM操作にあります。 DOMオペレーションは非常にパフォーマンスを消費するものです。 DOM操作中にパフォーマンスを保存するにはどうすればよいですか？
1。リフローを減らします
リフローとは何ですか？
DOM要素のプロパティが変更されると（色など）、ブラウザはレンダリングに通知して、対応する要素を再定義します。このプロセスは塗り直しと呼ばれます。
変更に要素レイアウト（幅など）が含まれる場合、ブラウザは元の属性を破棄し、結果を再計算してレンダリングに渡して、ページ要素を再現します。このプロセスはリフローと呼ばれます。
リフローを減らす方法
最初にドキュメントから要素を削除し、変更を完了した後、要素を元の位置に戻します（特定の要素とその子要素で多数のリフロー操作が実行されると、1と2の方法の効果がより明白になります）
要素の表示を「なし」に設定し、変更を完了した後、ディスプレイを元の値に変更します
スタイル属性を複数回変更する代わりに、複数のスタイル属性を変更するときにクラスクラスを定義します（特定の学生が推奨）
ページに大量の要素を追加するときは、DocumentFragmentを使用します
例えば
コードコピーは次のとおりです。
for（var i = 0; i <100：i ++）{
var child = docuemnt.createelement（ "li"）;
child.innerhtml = "child";
document.getElementById（ "親"）。appendChild（child）;
}
コードが要素の状態情報への複数のアクセスを必要とする場合、状態が変更されていない場合に変数に一時的に保存できます。典型的な例は次のとおりです。
DOM要素を検索するときは、ページ要素を広大な領域で通過するのを避け、正確なセレクターを使用するか、コンテキストを指定して検索範囲を絞り込んで、jQueryを例にして取得するようにしてください。
ファジーマッチングセレクターを使用します。たとえば、$（ "[name*= '_ fix']"）、IDなどのより多くの複合セレクターを使用し、スコープ$（ "li.active"）などを徐々に絞り込みます。
コンテキストを指定します：たとえば、$（ "＃parent .class"）、$（ "。クラス"、$ el）など
4.イベント委任を使用します
使用シナリオ：多数のレコードを含むリスト。各レコードは、イベントをクリックするためにバインドする必要があります。マウスをクリックした後、一部の関数は実装されます。私たちの通常の練習は、各レコードのイベントを聴くために拘束することです。このプラクティスは、ページ上の多数のイベントリスナーにつながりますが、これは比較的非効率的です。
基本原則：私たちは皆、イベントがDOM仕様で泡立つことを知っています。つまり、あらゆる要素のイベントは、DOMツリーの構造に応じて段階的に段階的にバブルになります。イベントオブジェクトは、イベントソースを指すようにevent.target（IEに基づくsrcelement）も提供するため、親要素でイベントを聴いても、イベントをトリガーする最もオリジナルの要素を見つけることができます。これが代表者の基本原則です。これ以上苦労することなく、上記の例
上記で紹介した監視イベントの原則に基づいて、書き直しましょう。
もちろん、毎回イベントソースを判断する必要はありません。抽象化してツールクラスに引き渡して完了することができます。 jQueryのDelegate（）メソッドは、この機能を実装しています
構文は$（selector）.delegate（childselector、event、data、function）のようなものです。
コードコピーは次のとおりです。
$（ "div"）。デリゲート（ "button"、 "click"、function（）{
$（ "p"）。slidetoggle（）;
}）;
パラメーター説明（w3schoolから引用）
パラメーターの説明
ChildSelectorが必要です。イベントハンドラーの1つ以上の子要素が添付されることを指定します。
イベントが必要です。要素に添付された1つ以上のイベントを指定します。スペースごとに複数のイベント値を分離します。有効なイベントである必要があります。
データはオプションです。関数に渡された追加データを指定します。
関数が必要です。イベントが発生したときに実行される関数を指定します。
ヒント：イベント委任のもう1つの利点は、イベントバインディング後に動的に追加された要素でトリガーされたイベントでさえ聞こえることです。そのため、ページに動的に要素を追加するたびにイベントをバインドする必要はありません。