DOM操作とは何を指すのか

Question

DOM操作は遅い、というのをよく聞きます。
例えば appendChild や innerHTML などは、DOM操作してるとは思うのですが、
下記のような、要素を変数に保存するだけ、属性値を取得するだけ、などもDOM操作にあたるのかを知りたいです。

// 要素を変数に保存する（id指定）
var hoge = document.getElementById('hoge')

// 要素を変数に保存する（クラス指定）
var bar = document.getElementsByClassName('bar');

// 属性値を取得する
var atr = hoge.getAttribute('piyo');

（下記はHTML自体に手を加えるため、DOM操作にあたるのではと考えました）

// 属性値を指定する
hoge.setAttribute('piyo', 'piyopiyo');

// クラスを追加
hoge.classList.add('hogehoge');

// クラスを削除する
hoge.classList.remove('hogehoge');

// スタイルを追加する
hoge.style.top = 100;

Answer 1

DOM操作とは

下記のような、要素を変数に保存するだけ、属性値を取得するだけ、などもDOM操作にあたるのかを知りたいです。

「参照だから操作ではない」は受け取り方次第で変わる曖昧なものですが、そこは問題ではないと思います。
uroboros さんが「操作ではない」と思うならそうなのでしょうが、問題は「それがDOM操作なのか」ではなく、「遅いDOM APIなのか」ではないでしょうか。

リフローとリペイント

DOM APIが遅いといわれる所以はいくつかありますが、代表的な問題として「リフロー/リペイントが複数回発生するか否か」があります(注意: Geckoでは「リフロー」ですが、Webkitでは「レイアウト」と呼ぶそうです)。

• ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
• ブラウザ動作の理解－リフローとリペイント及びその最適化 | ゆっくりと…

ブラウザがJavaScriptからDOM APIを受け付けた場合、それがドキュメントツリーに影響し、要素位置に変化があるものであれば「リフロー」と「リペイント」が派生し、要素位置が変わらないものの見た目が変わる場合は「リペイント」が発生し、画面を再描画させます。
これらの再描画処理がコストが高いので出来るだけ少なくする工夫が必要です。
例えば、appendChild で何度も要素ノードを挿入するよりも createDocumentFragment で一つにした要素ノード群を1回で appendChild する方がコストが低くなります。
また、element.style.color = 'black', element.style.backgroundColor = '#fee'; のように複数回styleを変更するよりも element.classList.add('hoge') で1回でスタイルを変更する方がコストが低くなります。

複雑なDOMノードを生成する

要素ノードの下に要素ノードが入るような複雑なDOMノードを生成するDOM操作も遅いといえます。
DOM APIでは createElement, setAttribute 等で何回も関数呼び出しが発生し、処理を小分けにすることになるので積み重なると結構なコストになります。
雛形となるDOMノードを生成し、cloneNode で複製したり、template要素を利用する事である程度はコストを軽減する事が可能です。

• Node.cloneNode - Web API インターフェイス | MDN
• HTML で利用可能になった Template タグ: クライアントサイドのテンプレートの標準化 - HTML5 Rocks

DOM 参照系API

DOM参照系APIはこれらに合致しないので、一般には遅いDOM操作ではありません。
ただし、ECMAScript系APIと比べれば重い事に変わりはないので、不必要に変数に格納する処理は避けるべきだと考えます。
変数へキャッシュするとしてもそれが本当に効果があるのか、良く検証してみる必要があります。

Re: uroboros さん

Comments

[uroboros]

みなさん回答ありがとうございました。

DOM操作で一括りするのではなく、その操作が何をやっているのか理解する必要があるようですね。
またコストを低くするという別ルートからのアプローチもあること、大変勉強になりました。

Answer 2

「DOM操作は遅い」はレンダリングコストのことを言っているのでは。DOMへのアクセス自体が遅くなる主因ではないので、「属性値を取得するだけ」は「DOM操作」ではあると思いますが「遅い」とは関係ないと思います。

---

追記：

下記属性値についてはリフローが発生するので「遅い」に関係する可能性がありました。maisumakunさん指摘ありがとうございます！

1. offsetTop、offsetLeft、offsetWidth、offsetHeight
   

2. scrollTop、scrollLeft、scrollWidth、scrollHeight
   

3. clientTop、clientLeft、clientWidth、clientHeight
   

4. getComputedStyle()、あるいは IE の currentStyle
   

※ think49さんの提示されたリンク（http://tokkono.cute.coocan.jp/blog/slow/index.php/web-technology/reflow-and-repaint-in-browser/）より引用

Comments

[maisumakun]

参照だけであっても、レイアウト系の値を取得しようとするとリフローを発生させてしまうことがあるので、そこで詰まってしまう事がありえます。

[kei344]

すみません、「レイアウト系の値」とは width などへの参照でしょうか？

[maisumakun]

そうですね、offsetなど、描画位置を計算しなければ正しい値の出ないものです（widthがそうなるかは状況依存です）。

[kei344]

理解しました、指摘ありがとうございます。

Answer 3

DOM = Document Object Model ですから、ドキュメントをオブジェクト化して処理している以上、全て DOM 操作です。

そもそも document 自体がオブジェクトですしね。

Answer 4

こんなページなどを見てみました。

ここに書かれている話が一番のポイントかどうかわかりませんが、少なくとも自分は「何が遅いのか」についての一つ要因として、DOMを操作することとその後に行われるレイアウト処理の関係について分かりやすく書かれていると感じました。

JavascriptでのDOM操作に関する性能対策を話題にするものもいくつか見かけますね。それらについて自分はいろいろ読んではいないのですが、そうしたものを読んでみるのも参考になるのではないかと思います。