新鮮でユニークなユーザーエクスペリエンスを提供するために、多くのWebサイトはJavaScriptを使用して設計を改善し、フォームを確認し、ブラウザを確認し、AJAXリクエスト、Cookie操作などを確認して、更新されない動的効果を実現します。ただし、ブラウザで大量のコンテンツをレンダリングする場合、適切に処理されていない場合、Webサイトのパフォーマンスは急激に低下します。したがって、JavaScriptの実行効率を改善する方法を理解する必要があります。
JavaScript関数
JavaScriptでは、使用前に関数が事前にコンパイルされます。関数の代わりに文字列を使用できることもありますが、このJavaScriptコードは実行するたびに再格付けされ、パフォーマンスに影響します。
1.評価の例
コードコピーは次のとおりです。
eval（ 'output =（input * input）'）;
//次のように変更することをお勧めします
eval（new function（）{output =（input * input）}）;
2。SetimeOutの例
コードコピーは次のとおりです。
setimeout（ "alert（1）"、1000）;
//次のように変更することをお勧めします
setimeout（function（）{alert（1）}、1000）;
文字列の代わりにパラメーターとして関数を使用して、新しい方法のコードをJavaScriptコンパイラによって最適化できるようにします。
JavaScriptスコープ
JavaScriptスコープチェーンの各スコープには、いくつかの変数が含まれています。スコープチェーンを理解して、それを利用できるようにすることが重要です。
コードコピーは次のとおりです。
var localvar = "global"; //グローバル変数
function test（）{
var localvar = "local"; //ローカル変数
//ローカル変数
アラート（localvar）;
//グローバル変数
アラート（this.localvar）;
//ドキュメントを見つけると、ローカル変数が見つからないので、グローバル変数を探してください
var pageName = document.getElementById（ "PageName"）;
}
ローカル変数を使用すると、グローバル変数を使用するよりもはるかに高速です。これは、スコープチェーンでさらに離れているほど、解析が遅くなるためです。次の図は、スコープチェーン構造を示しています。
コードに掲載されているか、コードを試してみると、以下の図に示すように、スコープチェーンはより複雑になります。
JavaScript文字列
非常にパフォーマンスの影響を与えるJavaScriptの関数は、文字列連結です。一般に、 +サインは、文字列のスプライシングを実装するために使用されます。ただし、初期のブラウザはそのような接続方法を最適化しなかったため、JavaScriptの実行効率を大幅に低下させる文字列の継続的な作成と破壊が生じました。
コードコピーは次のとおりです。
var txt = "hello" + "" + "world";
に変更することをお勧めします：
コードコピーは次のとおりです。
var o = [];
o.push（ "hello"）;
o.push（ ""）;
o.push（ "world"）;
var txt = o.join（）;
単にカプセル化しましょう：
コードコピーは次のとおりです。
関数stringbuffer（str）{
var arr = [];
arr.push（str || ""）;
this.append = function（str）{
arr.push（str）;
これを返します。
};
this.toString = function（）{
return arr.join（ ""）;
};
};
次に、これを呼び出します：
コードコピーは次のとおりです。
var txt = new StringBuffer（）;
txt.append（ "hello"）;
txt.append（ ""）;
txt.append（ "world"）;
alert（txt.tostring（））;
JavaScript DOM操作
HTMLドキュメントオブジェクトモデル（DOM）は、HTMLドキュメントにアクセスして操作する標準的な方法を定義します。これは、要素、属性、およびテキストコンテンツを含むノードツリーとしてHTMLドキュメントを表します。 HTML DOMを使用することにより、JavaScriptはHTMLドキュメント内のすべてのノードにアクセスして操作できます。
DOM塗り直し
ページに変更されたDOMオブジェクトにDOMの再描画が含まれるたびに、ブラウザはページを再レンダリングします。したがって、DOMオブジェクトの変更の数を減らすことで、JavaScriptのパフォーマンスを効果的に改善できます。
コードコピーは次のとおりです。
for（var i = 0; i <1000; i ++）{
var elmt = document.createelement（ 'p'）;
elmt.innerhtml = i;
document.body.appendChild（elmt）;
}
に変更することをお勧めします：
コードコピーは次のとおりです。
var html = [];
for（var i = 0; i <1000; i ++）{
html.push（ '<p>' + i + '</p>'）;
}
document.body.innerhtml = html.join（ ''）;
DOMアクセス
HTMLドキュメントの各ノードは、DOMからアクセスできます。 getElementById（）、getElementsByTagname（）、およびその他のメソッドを呼び出すたびに、ノードが再仕上げされてアクセスされます。したがって、見つかったDOMノードをキャッシュすると、JavaScriptのパフォーマンスも向上できます。
コードコピーは次のとおりです。
document.getElementById（ "p2"）。style.color = "blue";
document.getElementById（ "p2"）。style.fontfamily = "arial";
document.getElementById（ "p2"）。style.fontsize = "ervery";
に変更することをお勧めします：
コードコピーは次のとおりです。
var elmt = document.getElementById（ "p2"）;
elmt.style.color = "blue";
elmt.style.fontfamily = "arial";
elmt.style.fontsize = "ervery";
DOMトラバーサル
DOMトラバーサルの子要素は、通常、インデックスループごとに次の子要素を読み取ります。初期のブラウザでは、この読み取り方法は実行が非常に効率的です。次のシーリング方法を使用すると、JSによるDOMのトラバーサルの効率が向上します。
コードコピーは次のとおりです。
var html = [];
var x = document.getElementsByTagname（ "P"）; //すべてのノード
for（var i = 0; i <x.length; i ++）{
// todo
}
に変更することをお勧めします：
コードコピーは次のとおりです。
var html = [];
var x = document.getElementById（ "div"）; //優れたノード
var node = x.firstchild;
while（node！= null）{
// todo
node = node.nextsibling;
}
JavaScriptメモリリリース
Webアプリケーションでは、DOMオブジェクトの数が増えると、メモリ消費量がますます大きくなります。したがって、ブラウザがこのメモリをリサイクルできるように、オブジェクトへの参照を時間内にリリースする必要があります。
DOMが占めるメモリを解放します
コードコピーは次のとおりです。
document.getElementById（ "test"）。innerhtml = "";
DOM要素のinnerhtmlを空の文字列に設定すると、子要素が占めるメモリを解放できます。
JavaScriptオブジェクトをリリースします
コードコピーは次のとおりです。
//物体：
obj = null
//オブジェクトプロパティ：
obj.propertyを削除します
//配列要素：
arr.splice（0,3）; //最初の3つの要素を削除します