高機能javascript(1)----3つの習慣を書き出します.
9883 ワード
このように長いフロントエンドエンジニアをして、友達にどうやって高性能のjavascriptを書けばいいかと聞かれました.それでは、今日簡単にまとめてみます.js自体は性能の問題がないです.いわゆるメモリリークは主にIE 6、IE 7、IE 7のメモリリークの問題も深刻ではありません.ここではブラウザによるメモリリーク問題を議論しません.私たちはただ討論して、どのような書き方の習慣を身につけて書きますか?高効率で高性能なjs.
ここでは三つのjsを書く習慣をまとめました.そしてそれぞれの実行効率、メモリ問題、安全などの各方面について総合的に分析して、この三つの習慣の原因を身につけます.
1.ローカル変数をできるだけ使う:
ローカル変数の作成とアクセスは非常に安価で迅速ですが、グローバル変数を使用すると、Jsのグローバル変数への呼び出しは実際にGLOBALオブジェクトへの検索参照であり、性能が低下します. ローカル変数は現在のスコープに直接作成されます.参照を検索するプロセスは必要ありません.現在のスコープだけではなく、クローズド内の局所変数のアクセスも含めて非常に速いです.しかし、このプロセスによる最適化は、膨大なjsプログラムの長時間の運行を必要としています.
以下では、js解析プロセスを細分化して理解する.
一つの変数は具体的には局所変数ですか?それともグローバル変数ですか?局部変数はどのレイヤーで閉じられていますか?いくつかの変数です.コンパイルする時にすでに確定されています.重複したvar声明はjsの実行効率に影響しません.js実行時、局部変数ならメモリアドレスに直接接続されます.グローバル変数は対象アクセスです.明らかに局所変数は効率的に最適化されることが多い.
しかし、いつでも局所変数は最適化されていません.
例えば、変数が1つの表現式またはdomノードを検索するプロセスなどである場合、変数の使用には検索と計算のプロセスが含まれています.このように計算回数が多い場合、グローバル変数を使うと一度の固化結果が得られますが、局所変数を使用すると逆に何度も検索が必要になり、効率に影響を与えます.
まとめ:
もちろん、上記のデータはjsコードの実行効率だけにとって、具体的な応用の中で、できるだけ局部変数を使うことをお勧めします.なぜなら、jsの重要なプログラミング理念は全体のオブジェクトを汚染しないことであり、全体のオブジェクトは異なるモジュール(またはページ上の広告)にアクセスされ、上にデータを保存し、関数は予期せぬ結果をもたらすからです.したがって、グローバルオブジェクトとローカル変数を活用します.
2.適時にコールバック関数をリリースし、イベントバインディングを解除します.
上記の習慣は主に実行効率についてですが、この習慣はメモリ漏れの問題です.古いブラウザ自体のバグによるメモリ流出以外に、間違ったjsコードを書くとメモリ漏れの原因になります.
まず、この文の意味を説明するコードがあります.
例えばdivのkeyupとclick事件.keyup事件がdivを引用して、divがまたclickを引用している場合、keyupはclickを引用し、clickが別のdivのkeyupを引用すると、メモリが漏洩し、keyupまたはclickのどちらかを縛ってもメモリ漏れが解消されます.
このような問題が発生する可能性があります.
上の話は論理が複雑ですか?とりあえずこの習慣を身につけるのは間違いないです.
タイムリーにコールバック関数をリリースし、イベントバインディングを解除します.
3.引用を即時にクリアします.
この習慣はメモリ漏れの問題に対しても、まず以下のコードを見てみます.
したがって、この時点では、私たちはすぐに参照をクリアする必要があります.このコードのメモリ流出の問題は、イベントの対象eによるものです.23行で、コメントを削除した後、e = nullは、eおよびそれが参照するdomノードが解放され、メモリリーク問題が解決されるように、内部関数の外部層関数の変数eが指すオブジェクトの参照を解放する.
もちろん、高機能なjsを書きたいです.詳しく研究できるところがたくさんあります.上の3つの習慣は日常的なコードの中で身につけることができます.関数の引用を減らしたり、クローズドを使わないようにするなど、良い習慣がたくさんあります.これらの方法を作るには高いコストが必要かもしれません.機会があれば、また皆さんと共有しましょう.
ここでは三つのjsを書く習慣をまとめました.そしてそれぞれの実行効率、メモリ問題、安全などの各方面について総合的に分析して、この三つの習慣の原因を身につけます.
1.ローカル変数をできるだけ使う:
ローカル変数の作成とアクセスは非常に安価で迅速ですが、グローバル変数を使用すると、Jsのグローバル変数への呼び出しは実際にGLOBALオブジェクトへの検索参照であり、性能が低下します. ローカル変数は現在のスコープに直接作成されます.参照を検索するプロセスは必要ありません.現在のスコープだけではなく、クローズド内の局所変数のアクセスも含めて非常に速いです.しかし、このプロセスによる最適化は、膨大なjsプログラムの長時間の運行を必要としています.
以下では、js解析プロセスを細分化して理解する.
一つの変数は具体的には局所変数ですか?それともグローバル変数ですか?局部変数はどのレイヤーで閉じられていますか?いくつかの変数です.コンパイルする時にすでに確定されています.重複したvar声明はjsの実行効率に影響しません.js実行時、局部変数ならメモリアドレスに直接接続されます.グローバル変数は対象アクセスです.明らかに局所変数は効率的に最適化されることが多い.
しかし、いつでも局所変数は最適化されていません.
例えば、変数が1つの表現式またはdomノードを検索するプロセスなどである場合、変数の使用には検索と計算のプロセスが含まれています.このように計算回数が多い場合、グローバル変数を使うと一度の固化結果が得られますが、局所変数を使用すると逆に何度も検索が必要になり、効率に影響を与えます.
まとめ:
もちろん、上記のデータはjsコードの実行効率だけにとって、具体的な応用の中で、できるだけ局部変数を使うことをお勧めします.なぜなら、jsの重要なプログラミング理念は全体のオブジェクトを汚染しないことであり、全体のオブジェクトは異なるモジュール(またはページ上の広告)にアクセスされ、上にデータを保存し、関数は予期せぬ結果をもたらすからです.したがって、グローバルオブジェクトとローカル変数を活用します.
2.適時にコールバック関数をリリースし、イベントバインディングを解除します.
上記の習慣は主に実行効率についてですが、この習慣はメモリ漏れの問題です.古いブラウザ自体のバグによるメモリ流出以外に、間違ったjsコードを書くとメモリ漏れの原因になります.
まず、この文の意味を説明するコードがあります.
1 img.onload = function () {
2 img.onload = img.onerror = null;
3 }
4 $(...).on('keyup', function(e){
5 $().off(e);
6 })例えばdivのkeyupとclick事件.keyup事件がdivを引用して、divがまたclickを引用している場合、keyupはclickを引用し、clickが別のdivのkeyupを引用すると、メモリが漏洩し、keyupまたはclickのどちらかを縛ってもメモリ漏れが解消されます.
このような問題が発生する可能性があります.
上の話は論理が複雑ですか?とりあえずこの習慣を身につけるのは間違いないです.
タイムリーにコールバック関数をリリースし、イベントバインディングを解除します.
3.引用を即時にクリアします.
この習慣はメモリ漏れの問題に対しても、まず以下のコードを見てみます.
1 <!doctype html>
2 <html>
3 <head>
4 <title>Memory leak demo</title>
5 </head>
6 <body>
7 <a href="javascript:;">Click me</a>
8 </body>
9 <script src="jquery-1.8.0.js"></script><script>
10 $('a').click(function callback(e) {
11 $(this).remove();
12 $('<a href="javascript:;">Click me</a>').appendTo(document.body).click(function(e2){
13 e2.leak = e;
14 callback.call(this, e2);
15 });
16
17 var current = e, n = 0;
18 while(current.leak){
19 current = current.leak;
20 n++;
21 }
22 console.log('leaked: ' + n);
23 //e = null;
24 });
25 </script>
26 </html>したがって、この時点では、私たちはすぐに参照をクリアする必要があります.このコードのメモリ流出の問題は、イベントの対象eによるものです.23行で、コメントを削除した後、e = nullは、eおよびそれが参照するdomノードが解放され、メモリリーク問題が解決されるように、内部関数の外部層関数の変数eが指すオブジェクトの参照を解放する.
もちろん、高機能なjsを書きたいです.詳しく研究できるところがたくさんあります.上の3つの習慣は日常的なコードの中で身につけることができます.関数の引用を減らしたり、クローズドを使わないようにするなど、良い習慣がたくさんあります.これらの方法を作るには高いコストが必要かもしれません.機会があれば、また皆さんと共有しましょう.