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

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

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