1

次の宿題に取り組んでいるときに質問が出てきました:divsをクリックすると色が変わる 4 人を作成しますbutton。

それはすべて機能していますが、私の先生はビアinit functionを取得するためにを使用し、私はそれ自体を使用し、をまったく使用しませんでした。下記参照：divsgetElementById("div1")changeColorFunction()init function

私の解決策：

function changeColor () {

    document.getElementById("div1").style.background = createNewColor();
    document.getElementById("div2").style.background = createNewColor();
    document.getElementById("div3").style.background = createNewColor();
    document.getElementById("div4").style.background = createNewColor();

}

私の教師の解決策：

    var d1,d2,d3,d4;

    function init(){

    d1 = document.getElementById("d1");
    d2 = document.getElementById("d2");
    d3 = document.getElementById("d3");
    d4 = document.getElementById("d4");
    }
window.onload = init;

を取得するのに最適な時間/場所についての質問elementsです。この小さなコードでは、それほど大きな違いはないと思いますが、いつ問題になるのでしょうか?

elementsこのプロジェクトが成長したとき、ユーザーはコードを実行する前にブラウザーが常に最初に取得する必要があることを私のソリューションで認識しますか?

フォローしていただけると幸いです。

4

3 に答える 3

0

divそれらに何度もアクセスする場合は、教師が行っているように、事前にキャッシュしておくとよいでしょう。

つまり、スタイルを変更するたびに、変数に保存されているキャッシュされた要素のを変更してから、 を使用して DOM ツリーから取得する方が高速です。styleDOMgetElementById

ただし、違いはほとんど無視できますが、いつものように、それを確認する最善の方法は、ベンチマークを行うことです。それを説明するために、 jsperf.comテスト ケースを作成しました。ここで結果を確認して、それで遊ぶことができます。

Testing in Chrome 21.0.1180.83 32-bit on Windows Server 2008 R2 / 7 64-bit
+-----------------------+------------------------------------------------+
| Test                  |  Ops/sec                                       |
+-----------------------+------------------------------------------------+
| Cached getElementById |  584,606 ±2.62% fastest                        |
+-----------------------+------------------------------------------------+
| getElementById        |  422,957 ±1.27% 27% slower                     |
+-----------------------+------------------------------------------------+
于 2012-09-02T16:58:56.617 に答える
0

それは実質的に違いはありません。古いブラウザでは、非常に小さなパフォーマンスの違いが生じる場合があります。グローバル変数を作成していません。つまり、同じdivで何か他のものを変更する必要がある場合は、ID で再度取得する必要があります。あなたの教授の方法では、彼は変数を使用するだけです。

于 2012-09-02T16:52:46.890 に答える
0

実際、違いは、教師が div を「キャッシュ」していることです。これは、色を変更する必要がある場合、変数に色があるため、毎回 getElementById でページを検索する必要がないことを意味します。

あなたの場合、div の色を変更するたびに、ページをスキャンして div を取得します。

これにより、大きなページで違いが生じる可能性があります。

于 2012-09-02T16:54:32.847 に答える