回答編集履歴
1
typo修正、章構成の変更
answer
CHANGED
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
> 下記のような、要素を変数に保存するだけ、属性値を取得するだけ、などもDOM操作にあたるのかを知りたいです。
|
|
4
4
|
|
|
5
5
|
「参照だから操作ではない」は受け取り方次第で変わる曖昧なものですが、そこは問題ではないと思います。
|
|
6
|
-
uroboros さんが「操作ではない」と思うならそうなのでしょうが、問題は「それがDOM操作なのか」ではなく、「遅いDOM APIなのか」ではないでしょうか。
|
|
6
|
+
uroboros さんが「操作ではない」と思うならそうなのでしょうが、問題は「それがDOM操作なのか」ではなく、「**遅いDOM APIなのか**」ではないでしょうか。
|
|
7
7
|
|
|
8
|
-
###
|
|
8
|
+
### リフローとリペイント
|
|
9
9
|
|
|
10
|
-
DOM APIが遅いといわれる所以はいくつかありますが、代表的な問題として「リフロー/リペイントが複数回発生するか否か」があります(注意: Geckoでは「リフロー」ですが、Webkitでは「レイアウト」と呼ぶそうです)。
|
|
10
|
+
DOM APIが遅いといわれる所以はいくつかありますが、代表的な問題として「**リフロー/リペイント**が複数回発生するか否か」があります(注意: Geckoでは「リフロー」ですが、Webkitでは「レイアウト」と呼ぶそうです)。
|
|
11
11
|
|
|
12
12
|
- [ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks](https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/)
|
|
13
13
|
- [ブラウザ動作の理解－リフローとリペイント及びその最適化 | ゆっくりと…](http://tokkono.cute.coocan.jp/blog/slow/index.php/web-technology/reflow-and-repaint-in-browser/)
|
|
@@ -15,12 +15,19 @@
|
|
|
15
15
|
ブラウザがJavaScriptからDOM APIを受け付けた場合、それがドキュメントツリーに影響し、要素位置に変化があるものであれば「リフロー」と「リペイント」が派生し、要素位置が変わらないものの見た目が変わる場合は「リペイント」が発生し、画面を再描画させます。
|
|
16
16
|
これらの再描画処理がコストが高いので出来るだけ少なくする工夫が必要です。
|
|
17
17
|
例えば、`appendChild` で何度も要素ノードを挿入するよりも `createDocumentFragment` で一つにした要素ノード群を1回で `appendChild` する方がコストが低くなります。
|
|
18
|
-
また、`element.style.color = 'black', element.style.backgroundColor = '#fee';` のように複数回styleを
|
|
18
|
+
また、`element.style.color = 'black', element.style.backgroundColor = '#fee';` のように複数回styleを変更するよりも `element.classList.add('hoge')` で1回でスタイルを変更する方がコストが低くなります。
|
|
19
19
|
|
|
20
|
+
### 複雑なDOMノードを生成する
|
|
21
|
+
|
|
20
|
-
|
|
22
|
+
要素ノードの下に要素ノードが入るような複雑なDOMノードを生成するDOM操作も遅いといえます。
|
|
21
23
|
DOM APIでは `createElement`, `setAttribute` 等で何回も関数呼び出しが発生し、処理を小分けにすることになるので積み重なると結構なコストになります。
|
|
22
|
-
雛形となるDOMノードを生成し、`cloneNode` で複製したり、template要素
|
|
24
|
+
雛形となるDOMノードを生成し、`cloneNode` で複製したり、template要素を利用する事である程度はコストを軽減する事が可能です。
|
|
23
25
|
|
|
26
|
+
- [Node.cloneNode - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Node.cloneNode)
|
|
27
|
+
- [HTML で利用可能になった Template タグ: クライアントサイドのテンプレートの標準化 - HTML5 Rocks](https://www.html5rocks.com/ja/tutorials/webcomponents/template/)
|
|
28
|
+
|
|
29
|
+
### DOM 参照系API
|
|
30
|
+
|
|
24
31
|
DOM参照系APIはこれらに合致しないので、一般には遅いDOM操作ではありません。
|
|
25
32
|
ただし、ECMAScript系APIと比べれば重い事に変わりはないので、不必要に変数に格納する処理は避けるべきだと考えます。
|
|
26
33
|
変数へキャッシュするとしてもそれが本当に効果があるのか、良く検証してみる必要があります。
|