0

私はこれをやっています：

var hpl = doc.getElementById("hpl");

そしてこれ：

hpl.style.height = 28 + "px";

私の質問：DOMに2回アクセスしますか？1回目は要素を参照し、2回目はスタイルの高さを設定しますか？

もしそうなら、それはうまく最小化されますが、これはDOM呼び出しに関して非効率的であると結論付けるのは正しいですか。

var hpl = document.getElementById("hpl");
if (test === "Abel") {
    hpl.style.height = 28 + "px";
} else {
    hpl.style.height = 42 + "px";
}

したがって、これは速度の点で優れています。

if (test === "Abel") {
    document.getElementById("hpl").style.height = 28 + "px";
} else {
    document.getElementById("hpl").style.height = 42 + "px";
}

この背後にある理論を理解したいのですが、ここにjsperfがあり、実際の違いはないことを示唆しています。ありがとう。

4

2 に答える 2

2

私の知る限り、IdでDOM要素に一度アクセスすると、後ですぐに参照できるように辞書に入れられます（hashtable / hasmapなど）。

于 2012-09-23T05:13:30.103 に答える
1

あなたがそれをしている2つの異なる方法は、DOMにアクセスするという観点からも違いはありません。

var hpl = doc.getElementById("hpl");
hpl.style.height = 28 + "px";

これにより、を含むDOM要素が検索id="hpl"され、ローカル変数に入れられ、ローカル変数を使用してDOM要素を直接参照して（検索は不要）、変更されます。

あなたがこのようにそれをするとき：

document.getElementById("hpl").style.height = 28 + "px";

唯一の違いは、ローカル変数に格納しないことです（ただし、javascriptエンジンの内部に格納されます）。それでも、DOM要素を持っているDOM要素を見つけてDOM要素を取得し、そのid="hpl"DOM要素への参照を使用してスタイル値を直接設定します。これと最初の方法の間に有意差はありません。

DOM要素への保存された参照は、DOM要素にアクセスするための非常に効率的な方法です。検索は必要ありません。ブラウザ/JavaScriptエンジンの内部では、DOM参照は、実際のDOMオブジェクトに到達するための高速な方法を含むデータ構造です（おそらくそれへのポインタですが、実際の実装はブラウザ次第です）。

于 2012-09-23T05:23:49.063 に答える