Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

仮想DOMを実装してみてわかったこと、パフォーマンスに効果のあった実装方法

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

Transcript

  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!  ׀幠耮֮׶ָהֲ׀ְׂת׃׋կ