Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

仮想DOMの実装とパフォーマンス

1,871 views

Published on

仮想DOMを実装した知見
Implements virtual dom.

Published in: Software
  • Be the first to comment

仮想DOMの実装とパフォーマンス

  1. 1. Implements Virtual DOM
  2. 2. : @brn ( ) : : Cyberagent RightSegment AI Messenger : http://abcdef.gets.b6n.ch/
  3. 3. FuelDOM FuelDOM Reactjs View https://github.com/brn/fuel Virtual DOM
  4. 4. What is virtual dom? DOM DOM JS DOM DOM DOM DOM
  5. 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. 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. 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. 8. Virtual DOM Implementation DOM Patch Tree Edit Distance vdom-benchmark https://vdom-benchmark.github.io/vdom-benchmark/
  9. 9. Virtual DOM Implementation Fuel 157628 React 187506
  10. 10. Virtual DOM Implementation
  11. 11. Virtual DOM Implementation DOM •  •  DOM •  React JSX
  12. 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. 13. Virtual DOM Implementation React.createClass(‘div’, {}, // [1, 2, 3].map(v => React.createClass(‘span’, {}, v)), // ReactElement ReactElement React.createClass(‘span’, {}, ‘test’) )
  14. 14. Virtual DOM Implementation
  15. 15. Virtual DOM Implementation DOM •  Node.firstChild.nodeValue textContent •  textContent •  DOM
  16. 16. Virtual DOM Implementation vidom Patch key
  17. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 36. Virtual DOM Implementation Sorted Reversed KeyMap
  37. 37. Virtual DOM Implementation React JSX React flattenChildren ReactElement flyweight JSX
  38. 38. Virtual DOM Implementation •  •  createElement Clone •  ReactElement Others
  39. 39. Virtual DOM Implementation DOM Recylcer createElement DOM Caches
  40. 40. Virtual DOM Implementation DOM Map cloneElement createElement cloneElement
  41. 41. Virtual DOM Implementation ReactElement V8 Map Constructor over Object
  42. 42. Virtual DOM Implementation Fuel 96131 React 192195 React-lite 107019
  43. 43. Virtual DOM Implementation requestAnimationFrame Patch
  44. 44. Thank you!

×