質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • JavaScript

    16457questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8996questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5805questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

DOM操作とは何を指すのか

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 825

uroboros

score 11

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;
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+5

 DOM操作とは

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

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

 リフローとリペイント

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

ブラウザが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では createElementsetAttribute 等で何回も関数呼び出しが発生し、処理を小分けにすることになるので積み重なると結構なコストになります。
雛形となるDOMノードを生成し、cloneNode で複製したり、template要素を利用する事である程度はコストを軽減する事が可能です。

 DOM 参照系API

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

Re: uroboros さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/05 16:43

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

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

    キャンセル

+3

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


追記:

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

0.     offsetTop、offsetLeft、offsetWidth、offsetHeight
0.     scrollTop、scrollLeft、scrollWidth、scrollHeight
0.     clientTop、clientLeft、clientWidth、clientHeight
0.     getComputedStyle()、あるいは IE の currentStyle

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/05 16:15

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

    キャンセル

  • 2017/04/05 16:19

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

    キャンセル

  • 2017/04/05 16:22

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

    キャンセル

  • 2017/04/05 16:34

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

    キャンセル

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16457questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8996questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5805questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。