1 of 63

DOMのGCについて聞いてください！

2 of 63

DOMのGCについて聞いてください！

はじまるよ〜〜〜〜〜！！！！

3 of 63

自己紹介

  • canalun (@i_am_canalun)
  • elementチーム@テックタッチ

4 of 63

趣味でやっていること

  • DOMDOMタイムス�(zennで週刊連載)
  • TAPL.ts�(TAPLの輪読会)
  • chromium contributor

マイブーム

5 of 63

DOMのGC……？

思い浮かべてください……

6 of 63

DOMのGC……？

https://en.wikipedia.org/wiki/GameCube#/media/File:GameCube-Console-Set.png

https://commons.wikimedia.org/wiki/File:DOMDOM_Ibaraki_FC.JPG

7 of 63

DOMのGC……？

DOMのガベージコレクション

8 of 63

DOMのGC……？

DOMのガベージコレクション

9 of 63

ガベージコレクションってなんだっけ

👶「ガベージコレクションって？」

🧚‍「メモリに残ってる不要なデータを、自動で削除する仕組みです」

10 of 63

ガベージコレクションってなんだっけ

👶「メモリ！？そんなの気にしてない！」

11 of 63

ガベージコレクションってなんだっけ

👶「メモリ！？そんなの気にしてない！」

ふだんJSかいてる

12 of 63

メモリ管理の世界観は言語により異なる

  • JS: やってくれる�エンジン「自分がんばるんで何も気にせず書いてくれ！」

13 of 63

メモリ管理の世界観は言語により異なる

  • JS: やってくれる�エンジン「自分がんばるんで何も気にせず書いてくれ！」
  • C, C++: やってくれない�コンパイラ「なんにもしないよ！ちゃんとやってね

14 of 63

メモリ管理の世界観は言語により異なる

  • JS: やってくれる�エンジン「自分がんばるんで何も気にせず書いてくれ！」
  • C, C++: やってくれない�コンパイラ「なんにもしないよ！ちゃんとやってね
  • Rust: やらせてくる�コンパイラ「ここがおかしいよ！こう直してね」

15 of 63

メモリ管理の世界観は言語により異なる

  • JS: やってくれる�エンジン「自分がんばるんで何も気にせず書いてくれ！」
  • C, C++: やってくれない�コンパイラ「なんにもしないよ！ちゃんとやってね
  • Rust: やらせてくる�コンパイラ「ここがおかしいよ！こう直してね」

JSエンジンはDOMのGCだってやってくれる

でもどうやって？？

(今日のテーマ)

16 of 63

JSエンジンのGCのやり方

マークアンドスイープ

ルートセット=「絶対に残しておくオブジェクトたち」からたどれるものは残す。残りを消す

17 of 63

マークアンドスイープの流れ

18 of 63

マークアンドスイープの流れ

19 of 63

マークアンドスイープの流れ

20 of 63

マークアンドスイープの流れ

21 of 63

マークアンドスイープの流れ

22 of 63

マークアンドスイープの流れ

23 of 63

マークアンドスイープの流れ

JSエンジンは

マークアンドスイープしてるよ

(ルートはグローバルオブジェクトとか)

24 of 63

👶「DOMもマークアンドスイープすれば�よくない？」

25 of 63

👶「DOMだってたどれるんだからさ」

26 of 63

👶「ん？DOMってどこにあるんだっけ？」

27 of 63

DOMは誰が持っているんだ？

JSでDOMの操作

JSでDOMを操作して画面を変更するときのイメージ

28 of 63

DOMは誰が持っているんだ？

JSでDOMの操作

レンダリングエンジンにある？

でもJSエンジンにないとさわれない？

JSでDOMを操作して画面を変更するときのイメージ

29 of 63

DOMの本体はレンダリングエンジン側にあり、ラッパーを通じてJSに露出している

browser

rendering engine

JS engine

div

DOM

wrapper

DOM

JSでのDOMの操作

div

30 of 63

DOMの本体はレンダリングエンジン側にあり、ラッパーを通じてJSに露出している

browser

rendering engine

JS engine

div

DOM

wrapper

DOM

JSでのDOMの操作

div

なるほど……？

要するにどうなっているの？？

31 of 63

例えばこんなDOMを作ってみる

ローディングのバーを出して

fetchできたらコンテンツに切りかえる

Ulan et al; Garbage Collection as a Joint Venture

https://queue.acm.org/detail.cfm?id=3325132

32 of 63

v8とblinkそれぞれでDOMが表現される

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

33 of 63

実は……

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

  • JSエンジンの中だと、DOMは「ツリー」ではない
  • content.parentなどプロパティとしてつなげばつながる

34 of 63

parentElement()なんかも、ブラウザががんばって取得して返してくれているだけ

35 of 63

parentElement()なんかも、ブラウザががんばって取得して返してくれているだけ

大事なこと

JSエンジンのなかでは

DOMノードはツリーになっていない！

36 of 63

👶「じゃあDOMはマークアンドスイープできないってこと？」

37 of 63

実際にやってみよう

これだけ消せれば良いね！

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

38 of 63

V8は左しか見えない

これだけ消せれば良いね！

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

39 of 63

ルートからたどってみると……

これだけ消せれば良いね！

何も考えずにやると

消えすぎちゃう

(blinkで使っているのに

消えちゃう)

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

40 of 63

じゃあblinkから参照されてたら残す？

これだけ消せれば良いね！

blinkから参照されているなら必ず残すというルールはどうか？？

👉それはそれで残りすぎてしまう

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

41 of 63

👶「DOMもマークアンドスイープすれば�よくない？」

42 of 63

👶「DOMもマークアンドスイープすれば�よくない？」

43 of 63

object grouping (~2017/5, chrome56)

v8のGCに、blinkから「どのノードが同じツリーに属しているか」という情報を足し込む

44 of 63

object grouping (~2017/5, chrome56)

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

45 of 63

object grouping (~2017/5, chrome56)

「DOMツリー同じやで」

「DOMツリー同じやで」

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

46 of 63

object grouping (~2017/5, chrome56)

「DOMツリー同じやで」

「DOMツリー同じやで」

DOMツリーは相互に参照を持っているので

(i.e. parentElement/childNodes)

ツリー中のノードが1つでも生きていれば

全体が生きていると決めていい

47 of 63

object grouping (~2017/5, chrome56)

「DOMツリー同じやで」

「DOMツリー同じやで」

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

48 of 63

object grouping (~2017/5, chrome56)

「DOMツリー同じやで」

マークされずに終わる

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

49 of 63

object grouping (~2017/5, chrome56)

だめだった

  • グルーピングはDOMをすべて走査しないとできない。しかもその間DOMの変更は許されない
  • webアプリが進化してDOM操作の頻度が高くなった
  • なかなかGCができずにメモリ圧迫 or やったらやったで既にDOMがたまっていてGCにやたら時間がかかる

50 of 63

object grouping (~2017/5, chrome56)

だめだった

  • グルーピングはDOMをすべて走査しないとできない。しかもその間DOMの変更は許されない
  • webアプリが進化してDOM操作の頻度が高くなった
  • なかなかGCができずにメモリ圧迫 or やったらやったで既にDOMがたまっていてGCにやたら時間がかかる

51 of 63

cross-component tracing (~now)

v8がGCしててDOMに当たったら、blinkに「このDOMなにとつながってる！？」って聞く

52 of 63

cross-component tracing (~now)

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

53 of 63

cross-component tracing (~now)

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

54 of 63

cross-component tracing (~now)

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

55 of 63

cross-component tracing (~now)

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

56 of 63

cross-component tracing (~now)

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

57 of 63

cross-component tracing (~now)

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

58 of 63

cross-component tracing (~now)

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

59 of 63

cross-component tracing (~now)

マークされずに終わる

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

60 of 63

cross-component tracing (~now)

マークされずに終わる

Ulan et al; Garbage Collection as a Joint Venture https://queue.acm.org/detail.cfm?id=3325132

61 of 63

CCTによってDevToolsでの

メモリデバッグの精度があがった

左: object grouping

右: CCT

DevToolsで追えた度合いが異なる

左はDOMノード間の関係が見えない

Degenbaev, Ulan, et al. "Cross-component garbage collection."

​

62 of 63

結論

  • DOMのGCは工夫されている！
  • blink側でどうしているかは各自で調べてみてね
  • ブラウザやエンジンで方式が違うので興味があったら調べてみてね

63 of 63

ふろく: すごくありがたかったソース

  • DOMのGCについて説明している日本語ブログ記事: https://blog.dodgson.org/b/2012/12/19/dom-and-gc-or-what-happend-at-eden/
  • Kentaro Haraさんのchromium関連ドキュメント: https://haraken.info/index.php?tag=reajklff
  • CCTのいいまとめ: https://queue.acm.org/detail.cfm?id=3325132
  • CCTの論文: https://research.google/pubs/cross-component-garbage-collection/