The document discusses virtual DOM implementations. It explains that virtual DOM is used to more efficiently update the real DOM by maintaining a virtual representation of the DOM and only updating the real DOM with necessary changes. It provides examples of how virtual DOM libraries like React and Fuel work under the hood by using techniques like DOM diffing algorithms and caching to improve performance.

1. Implements
Virtual DOM

2. : @brn ( )
:
: Cyberagent RightSegment AI Messenger
: http://abcdef.gets.b6n.ch/

3. FuelDOM
FuelDOM Reactjs View
https://github.com/brn/fuel
Virtual DOM

4. What is virtual dom?
DOM DOM JS
DOM
DOM
DOM
DOM

5. What is virtual dom?
DOM node
DOM node DOM node
DOM node DOM node DOM node
Virtual Node
Virtual Node Virtual Node
Virtual Node Virtual Node Virtual Node
DOM tree
VDom Tree

6. div
span div
text span p
What is virtual dom?
div
span div
text span p
Removed
VDom tree A
VDom Tree B

7. DOM node
DOM node DOM node
DOM node DOM node DOM node
div
span div
text span p
Removed
What is virtual dom?
VDom tree
Dom Tree
Remove OP

8. Virtual DOM Implementation
DOM
Patch
Tree Edit Distance
vdom-benchmark
https://vdom-benchmark.github.io/vdom-benchmark/

9. Virtual DOM Implementation
Fuel 157628
React 187506

10. Virtual DOM Implementation

11. Virtual DOM Implementation
DOM
•
• DOM
•
React JSX

12. Virtual DOM Implementation
<div>
{[1, 2, 3].map(v => <span>{v}</span>)}
<span>test</span>
</div>
React.createClass(‘div’, {},
[1, 2, 3].map(v =>
React.createClass(‘span’, {}, v)),
React.createClass(‘span’, {}, ‘test’)
)

13. Virtual DOM Implementation
React.createClass(‘div’, {},
//
[1, 2, 3].map(v =>
React.createClass(‘span’, {}, v)),
// ReactElement ReactElement
React.createClass(‘span’, {}, ‘test’)
)

14. Virtual DOM Implementation

15. Virtual DOM Implementation
DOM
• Node.firstChild.nodeValue
textContent
• textContent
•
DOM

16. Virtual DOM Implementation
vidom Patch
key

17. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“5” li key=“4” li key=“3” li key=“2” li key=“1”
Unmatch
Match
treeALeftIndex = 0
treeBLeftIndex = 0
treeARightIndex = 4
treeBRightIndex = 4

18. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“5” li key=“4” li key=“3” li key=“2” li key=“1”
Unmatch
Match
treeALeftIndex = 0 treeARightIndex = 3
treeBLeftIndex = 1 treeBRightIndex = 4

19. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“5” li key=“4” li key=“3” li key=“2” li key=“1”
Unmatch
Match
treeALeftIndex = 0 treeARightIndex = 2
treeBLeftIndex = 2 treeBRightIndex = 4

20. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“5” li key=“4” li key=“3” li key=“2” li key=“1”
Unmatch
Match
treeALeftIndex = 0 treeARightIndex = 2
treeBLeftIndex = 2 treeBRightIndex = 4

21. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“5” li key=“4” li key=“3” li key=“2” li key=“1”
Match
treeALeftIndex = 0 treeARightIndex = 2
treeBLeftIndex = 2 treeBRightIndex = 4

22. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“3” li key=“1” li key=“2” li key=“4” li key=“5”
Unmatch
Unmatch
treeALeftIndex = 0
treeBLeftIndex = 0
treeARightIndex = 4
treeBRightIndex = 4
Match

23. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“3” li key=“1” li key=“2” li key=“4” li key=“5”
Unmatch
Unmatch
treeALeftIndex = 0
treeBLeftIndex = 0
treeARightIndex = 3
treeBRightIndex = 3
Match

24. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“3” li key=“1” li key=“2” li key=“4” li key=“5”
Unmatch
Match
treeALeftIndex = 0
treeBLeftIndex = 0
treeARightIndex = 2
treeBRightIndex = 2

25. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“3” li key=“1” li key=“2” li key=“4” li key=“5”
Match
treeALeftIndex = 0
treeBLeftIndex = 1
treeARightIndex = 2
treeBRightIndex = 2

26. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“3” li key=“1” li key=“2” li key=“4” li key=“5”
Match
treeALeftIndex = 1
treeBLeftIndex = 2
treeARightIndex = 2
treeBRightIndex = 2

27. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“4” li key=“2” li key=“3” li key=“1” li key=“5”
Unmatch
Unmatch
treeALeftIndex = 0
treeBLeftIndex = 0
treeARightIndex = 4
treeBRightIndex = 4
Match

28. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“4” li key=“2” li key=“3” li key=“1” li key=“5”
Unmatch
Match
treeALeftIndex = 0
treeBLeftIndex = 0
treeARightIndex = 3
treeBRightIndex = 3

29. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“4” li key=“2” li key=“3” li key=“1” li key=“5”
Unmatch
Unmatch
treeALeftIndex = 0
treeBLeftIndex = 1
treeARightIndex = 2
treeBRightIndex = 3
Match

30. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“4” li key=“2” li key=“3” li key=“1” li key=“5”
treeALeftIndex = 1
treeBLeftIndex = 1
treeARightIndex = 2
treeBRightIndex = 2
Match

31. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“4” li key=“2” li key=“3” li key=“1” li key=“5”
treeALeftIndex = 2
treeBLeftIndex = 2
treeARightIndex = 2
treeBRightIndex = 2
Match

32. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“5” li key=“3” li key=“1” li key=“4” li key=“2”
Unmatch
Match
treeALeftIndex = 0
treeBLeftIndex = 0
treeARightIndex = 4
treeBRightIndex = 4

33. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“5” li key=“3” li key=“1” li key=“4” li key=“2”
Unmatch
Unmatch
treeALeftIndex = 0
treeBLeftIndex = 1
treeARightIndex = 3
treeBRightIndex = 4
Unmatch
Unmatch

34. Virtual DOM Implementation
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“5” li key=“1” li key=“3” li key=“4” li key=“2”
treeALeftIndex = 0
treeBLeftIndex = 0
treeARightIndex = 4
treeBRightIndex = 4
{1: 1, 3: 2, 4: 3, 2: 4} = {key: index}
Map

35. Virtual DOM Implementation
Map
Map
li key=“1” li key=“2” li key=“3” li key=“4” li key=“5”
li key=“5” li key=“1” li key=“3” li key=“4” li key=“2”
この範囲
この範囲

36. Virtual DOM Implementation
Sorted Reversed
KeyMap

37. Virtual DOM Implementation
React JSX
React flattenChildren
ReactElement flyweight
JSX

38. Virtual DOM Implementation
•
• createElement Clone
• ReactElement
Others

39. Virtual DOM Implementation
DOM
Recylcer createElement
DOM
Caches

40. Virtual DOM Implementation
DOM Map
cloneElement
createElement
cloneElement

41. Virtual DOM Implementation
ReactElement
V8 Map
Constructor over Object

42. Virtual DOM Implementation
Fuel 96131
React 192195
React-lite 107019

43. Virtual DOM Implementation
requestAnimationFrame
Patch

44. Thank you!