1 of 27

DOMラッパーについて聞いてください

2 of 27

DOMラッパーについて聞いてください

はじまるよ！！！！

3 of 27

DOMラッパーについて聞いてください

はじまるよ！！！！

4 of 27

自己紹介

  • canalun (@i_am_canalun)
  • フロントエンド
  • DOM、ブラウザ

5 of 27

趣味でやっていること

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

6 of 27

趣味でやっていること

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

来週から型推論の章！

TVの前のみんなもチェック！

7 of 27

DOMに関する実験をしてみましょう

実験タイム

8 of 27

同じDOMを見ているはずなのに……？

9 of 27

同じDOMを見ているはずなのに……？

今日はこの現象を深掘りしてみよう！

10 of 27

同じDOMを見ているはずなのに……？

今日はこの現象を深掘りしてみよう！

11 of 27

今日のまとめ

  • JSで扱っているのはDOMの実体ではなくDOMラッパーである
  • 各worldはDOMを共有するが、ラッパーは共有されない

12 of 27

結論

  • JSで扱っているのはDOMの実体ではなくDOMラッパーである
  • 各worldはDOMを共有するが、ラッパーは共有されない

13 of 27

DOMラッパー？？

Own work, CC BY-SA 3.0, via Wikimedia Commons

14 of 27

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

JSでDOMの操作

15 of 27

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

JSでDOMの操作

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

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

16 of 27

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

browser

rendering engine

JS engine

div

DOM

wrapper

DOM

JSでのDOMの操作

div

17 of 27

どうなっているんだ？？

browser

rendering engine

JS engine

div

DOM

wrapper

DOM

JSでのDOMの操作

div

bindings

18 of 27

例えばdiv.firstChildをやると……

19 of 27

結論

  • JSで扱っているのはDOMの実体ではなくDOMラッパーである
  • 各worldはDOMを共有するが、ラッパーは共有されない

20 of 27

DOMラッパーをsandboxする”world”

A world is a concept to sandbox DOM wrappers among content scripts of Chrome extensions.

​

All worlds in one isolate share underlying C++ DOM objects, but each world has its own DOM wrappers.

from “Design of V8 bindings”

21 of 27

worldは3種類あり、コンテキストを持っている

Also each world has its own context.

There are three kinds of worlds: a main world, an isolated world and a worker world.

A main world is a world where a normal JavaScript downloaded from the web is executed.

An isolated world is a world where a content script of a Chrome extension is executed.

from “Design of V8 bindings”

22 of 27

結論

  • JSで扱っているのはDOMの実体ではなくDOMラッパーである
  • 各worldはDOMを共有するが、ラッパーは共有されない

つまり……

23 of 27

こういうこと

24 of 27

setAttribute()はDOMの操作であり……

25 of 27

div.XXはDOMラッパー、要するにJSオブジェクトの操作

26 of 27

まとめ

  • JSで扱っているのはDOMの実体ではなくDOMラッパー(JS Object)である
  • 各worldはDOMを共有するが、ラッパーは共有されない

27 of 27

本当はさあ……

GC