2

まったく同じことを行う Javascript コードの 2 つのセクションを考えてみましょう。

バージョン 1:

document.getElementById("test").style.backgroundColor = "green";
document.getElementById("test").style.borderColor = "red";
document.getElementById("test").style.borderStyle = "dashed";
document.getElementById("test").style.borderWidth = "thin";
document.getElementById("test").style.borderStyle = "dashed";
document.getElementById("test").style.margin = "0";
document.getElementById("test").style.padding = "0";

バージョン 2:

var testDiv = document.getElementById("test");
testDiv.style.backgroundColor = "green";
testDiv.style.borderColor = "red";
testDiv.style.borderStyle = "dashed";
testDiv.style.borderWidth = "thin";
testDiv.style.borderStyle = "dashed";
testDiv.style.margin = "0";
testDiv.style.padding = "0";

どちらが入力に時間がかかるか、またはその他の人間の入力や読みやすさの問題は別として、どちらが他方よりも効率的ですか? 彼らが人間にどのように見えるか以外に、それらを区別するものはありますか? 別の言い方をすれば、個人的なコーディング スタイル以外に、どちらかを選択する理由はありますか?

4

4 に答える 4

5

を呼び出すたびにgetElementById()、ブラウザーは DOM で別のルックアップを実行するように強制されます。これは、直接参照をたどる場合と比べてパフォーマンスが大幅に低下します。

JSPerf を作成することで、このようなことをテストできます。これは、ルックアップされた DOM ノードを再利用することで (少なくとも私のブラウザーでは) パフォーマンスが向上することを示す質問です。

于 2013-07-28T05:00:05.863 に答える
1

はい、getElementById() 呼び出しを 1 回だけ実行し、それを変数に割り当てると、コードを高速化できます (ただし、おそらくそれほどではありません)。getElementById() は結局のところ関数であり、使用するたびに評価する必要があります。

于 2013-07-28T04:55:15.647 に答える
1

ブラウザで document.getElemebtById() 関数を再実行する必要がないため、変数に格納するとはるかに効率的です。基本的に結果をキャッシュしています。要素を見つけるのが遅い場合、これは特定のケースで大きな違いを生む可能性があります。

getElementById はすでに非常に高速であるため、これは明らかではありません。ただし、特定の複雑な JQuery セレクターでは、多くの場合、違いが非常に顕著になります。

于 2013-07-28T04:55:36.907 に答える
-1

それは多くの時間を節約します。関数の呼び出しは常により高価です (関数呼び出しの数に基づいて、再帰的なランタイムの fag-packet 計算を行うことがあります)。

2 番目のバージョンは、関数の結果をキャッシュします。

これを使用すると、もう少し時間を節約できます。

var testDivStyle = document.getElementById('test').style;
testDivStye.backgroundColor = "green";
// ...
于 2013-07-28T04:56:04.793 に答える