JavaScriptの実行効率を効果的に向上させるための知識_JavaScriptスキル

新鮮でユニークなユーザー エクスペリエンスを提供するために、多くの Web サイトでは JavaScript を使用してデザインを改善し、フォームを検証し、ブラウザー、Ajax リクエスト、Cookie 操作などをチェックして、更新せずに動的な効果を実現します。ただし、ブラウザーでは大量のコンテンツをレンダリングする必要があり、それが適切に処理されないと、Web サイトのパフォーマンスが急激に低下します。したがって、JavaScript の実行効率を向上させる方法を理解する必要があります。

JavaScript 関数

JavaScript では、関数は使用前にプリコンパイルされます。関数の代わりに文字列を使用できる場合もありますが、この JavaScript コードは実行されるたびに再解析され、パフォーマンスに影響します。

1. 評価の例

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

eval('output=(input * input)');
// 次のように変更することをお勧めします:
eval(new function() { 出力=(入力 * 入力)});

2. setTimeout の例

コードをコピーします コードは次のとおりです:

setTimeout("alert(1)", 1000);
// 次のように変更することをお勧めします:
setTimeout(function(){alert(1)}, 1000);

パラメータとして文字列の代わりに関数を使用すると、新しいメソッドのコードが JavaScript コンパイラによって確実に最適化されます。

JavaScript スコープ

JavaScript スコープ チェーンの各スコープには、いくつかの変数が含まれています。スコープ チェーンを利用するには、スコープ チェーンを理解することが重要です。

コードをコピーします コードは次のとおりです:

var localVar = "グローバル" //グローバル変数;

関数テスト() {

var localVar = "ローカル" //ローカル変数

//ローカル変数
アラート(localVar);

//グローバル変数
アラート(this.localVar);

//ローカル変数でドキュメントが見つからない場合は、グローバル変数を検索します
var pageName = document.getElementById("pageName"); }

ローカル変数を使用すると、スコープ チェーンの奥に進むほど解決が遅くなるため、グローバル変数を使用するよりもはるかに高速になります。次の図は、スコープ チェーンの構造を示しています。

コード内に with ステートメントまたは try-catch ステートメントがある場合、以下に示すようにスコープ チェーンはより複雑になります。

JavaScript 文字列

パフォーマンスに大きく影響する JavaScript の関数は文字列の連結です。一般に、文字列を結合するためにシンボルが使用されます。ただし、初期のブラウザではこの接続方法が最適化されていなかったため、文字列の作成と破棄が継続的に発生し、JavaScript の実行効率が大幅に低下しました。

コードをコピーします コードは次のとおりです:

var txt = "こんにちは" " "ワールド";

次のように変更することをお勧めします:

コードをコピーします コードは次のとおりです:

var o = [];
o.push("こんにちは");
o.push(" ");
o.push("世界");
var txt = o.join();

単純にカプセル化しましょう:

コードをコピーします コードは次のとおりです:

function StringBuffer(str) {
var arr = [];
arr.push(str || "");
This.append = function(str) {
arr.push(str);
これを返します;
};
This.toString = function() {
return arr.join("");
};
};

次に、次のように呼び出します:

コードをコピーします コードは次のとおりです:

var txt = 新しい StringBuffer();
txt.append("こんにちは");
txt.append(" ");
txt.append("世界");
アラート(txt.toString());

JavaScript DOM 操作

HTML ドキュメント オブジェクト モデル (DOM) は、HTML ドキュメントにアクセスして操作するための標準的な方法を定義します。これは、要素、属性、テキスト コンテンツを含むノード ツリーとして HTML ドキュメントを表します。 HTML DOM を使用すると、JavaScript は HTML ドキュメント内のすべてのノードにアクセスし、それらを操作できます。

DOM 再描画

ページの DOM オブジェクトが変更されるたびに、DOM の再描画が行われ、ブラウザはページを再レンダリングします。したがって、DOM オブジェクトの変更の数を減らすと、JavaScript のパフォーマンスを効果的に向上させることができます。

コードをコピーします コードは次のとおりです:

for (var i = 0; i var elmt = document.createElement('p');
elmt.innerHTML = i;
document.body.appendChild(elmt);
}

次のように変更することをお勧めします:

コードをコピーします コードは次のとおりです:

var html = [];
for (var i = 0; i html.push('

' i '

');
}
document.body.innerHTML = html.join('');

DOM アクセス

HTML ドキュメント内のすべてのノードには、DOM を通じてアクセスできます。 getElementById()、getElementsByTagName()、およびその他のメソッドを呼び出すたびに、ノードが検索され、再度アクセスされます。したがって、見つかった DOM ノードをキャッシュすると、JavaScript のパフォーマンスも向上します。

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

document.getElementById("p2").style.color = "青";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "大きい";

次のように変更することをお勧めします:

コードをコピーします コードは次のとおりです:

var elmt = document.getElementById("p2");
elmt.style.color = "青";
elmt.style.fontFamily = "Arial";
elmt.style.fontSize = "大きい";

DOM トラバーサル

子要素の DOM 走査は通常、インデックスに従ってループ内の次の子要素を読み取ります。この読み取りメソッドは実行効率が非常に低く、js の DOM 走査の効率を向上させるために使用できます。

コードをコピーします コードは次のとおりです:

var html = [];
var x = document.getElementsByTagName("p");//すべてのノード
for (var i = 0; i //todo
}

次のように変更することをお勧めします:

コードをコピーします コードは次のとおりです:

var html = [];
var x = document.getElementById("div");//上位ノード
var ノード = x.firstChild;
while(node!= null){
//todo
ノード = ノード.nextSibling;
}

JavaScript メモリ解放

Web アプリケーションでは、DOM オブジェクトの数が増えると、メモリの消費量がますます増加します。したがって、ブラウザがメモリを再利用できるように、オブジェクトへの参照を時間内に解放する必要があります。

DOM が占有しているメモリを解放します

コードをコピーします コードは次のとおりです:

document.getElementById("test").innerHTML = "";

DOM 要素の innerHTML を空の文字列に設定して、その子要素によって占有されているメモリを解放します。

JavaScript オブジェクトを解放します

コードをコピーします コードは次のとおりです:

//オブジェクト:
obj = null
//オブジェクトのプロパティ:
obj.property を削除
//配列要素:
arr.splice(0,3);//最初の 3 要素を削除