ブラウザとフレンズになろう

1. ϒϥ΢βͱϑϨϯζʹͳΖ͏ ※1࿩͔͠ݟͨ͜ͱͳ͍Ͱ͢
2. ࣗݾ঺հ • ໊લɿञҪӳ৳( Ά͜ͻͰ ) • OthloTechӡӦ୅ද • ීஈ͸WEB԰͞Μ(Ruby, Node, React, etc…) • झຯɿөըؑ৆(Hulu), ήʔϜ࣮گ(ఋऀ), ςχε IZEFBCMF IZEF
3. ϒϥ΢βͱϑϨϯζʹͳΖ͏ ※1࿩͔͠ݟͨ͜ͱͳ͍Ͱ͢
4. Browser
5. Browser • Firefox, Chrome, Safari ʢOpen Sourceʣ • WEBϖʔδͱ͔දࣔ͢Δ΍ͭ
6. ϨϯμϦϯάͷྲྀΕ(Webkit)
7. DOM (Document Object Model)
8. DOM • HTML, XML౳ͷυΩϡϝϯτΛૢ࡞͢ΔͨΊͷAPI • *MLܥͷDocument͸໦ߏ଄ → DOM Tree
9. HTML DOM Tree : example 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>OthloTech</title> 5 </head> 6 <body> 7 <a href="#">hoge</a> 8 </body> 9 </html> %PDVNFOU IUNM
   
   3PPU
   FMFNFOU IFBE
   
   &MFNFOU CPEZ
   
   FMFNFOU UJUMF
   
   &MFNFOU B
   
   &MFNFOU l0UIMP5FDIz
   
   5FYU lISFGz
   
   "UUSJCVUF lIPHFz
   
   5FYU
10. Parse
11. ϨϯμϦϯάͷྲྀΕ(Webkit)
12. HTMLղੳ 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>OthloTech</title> 5 </head> 6 <body> 7 <a href="#">hoge</a> 8 </body> 9 </html> %PDVNF IUNM
    
    3PPU
    IFBE
    
    CPEZ
    
    UJUMF
    
    B
    
    l0UIMP5FDI lISFGz
    
    lIPHFz
    
    )5.-
    %PDVNFOU ࣈ۟ղੳ ߏจղੳ %0.
    5SFF
13. ղੳΞϧΰϦζϜ(HTML) • HTML͸௨ৗͷτοϓμ΢ϯύʔαʔɺϘτϜ ΞοϓύʔαʔͰ͸ղੳͰ͖ͳ͍ • ϒϥ΢βʹΑͬͯ͸ΤϥʔΛڐ༰͢Δ͔Β • JSͷdocument.writeͳͲͰղੳॲཧதʹมߋ͕ೖΔ͜ͱ͕ ͋Δ͔Β
14. ղੳΞϧΰϦζϜ(HTML) • ʮτʔΫϯԽʯͱʮπϦʔߏஙʯͷ2ஈ֊ )5.-࢓༷ͰղੳΞϧΰϦζϜ͕ղઆ͞Ε͍ͯ
    ͍ΔͷͰڵຯͷ͋Δਓ͸ݟͯΈ͍ͯͩ͘͞ IUUQTXXXXPSH538%IUNMQBSTJOHIUNM
15. Τϥʔͷڐ༰(HTML) • HTML࢓༷Ͱ͸Τϥʔॲཧ͸نఆ͞Ε͍ͯͳ͍ • <br> ͷ୅ΘΓͷ </br> → <br>ͱͯ͠ॲཧ • ೖΕࢠͷϑΥʔϜཁૉ → form಺ͷform͸ແࢹ • ਂ͗͢Δλά֊૚ → ಉ͡छྨͷλάͷೖΕࢠ͸ 20·Ͱ 8FCLJUͷྫ
16. ϨϯμϦϯάͷྲྀΕ(Webkit)
17. CSSղੳ(Webkit)
18. ScriptͱStyleSheetͷॲཧॱং • StyleSheet͸ཧ࿦తʹ͸DOM TreeΛߋ৽͠ͳ͍ • ղੳΛதஅ͠ͳͯ͘΋Αͦ͞͏ → NO • StyleSheetΛಡΈࠐΉ·ͰScriptΛϒϩοΫ(Firefox) • HTML5ͳΒasyncΛ͚ͭͯɺผεϨουͰղੳ/࣮ߦ
19. ϨϯμϦϯάͷྲྀΕ
20. Render Tree • ࢹ֮తͳཁૉΛදࣔॱʹฒ΂ͨ໦ߏ଄ • DOMཁૉʹରԠ͍ͯ͠Δ͕̍ର̍Ͱ͸ͳ͍ • headཁૉ, display:noneͷཁૉ͸ؚ·Εͳ͍ • visiblity: hiddenཁૉ͸ؚ·ΕΔ
21. Render Treeߏ੒ • ελΠϧγʔτͷΧεέʔυॱং • ϒϥ΢βͷએݴ • Ϣʔβʔͷ௨ৗͷએݴ • ੍࡞ऀͷ௨ৗͷએݴ • ੍࡞ऀͷॏཁͳએݴ • Ϣʔβʔͷॏཁͳએݴ(!important) ௿ ߴ ಉ͡ॱংͷ৔߹͸
    ผͷϧʔϧͰ൑அ
22. ηϨΫλͷಛҟੜ • HTMLͷʮstyleʯଐੑʹ͋Δ৔߹͸1, ͦΕҎ֎͸0 (=a) • ηϨΫλ಺ͷIDଐੑͷ਺ (=b) • ηϨΫλ಺ͷଞͷଐੑͱٙࣅΫϥεͷ਺ (=c) • ηϨΫλ಺ͷཁૉ໊ͱٙࣅཁૉͷ਺ (=d) YBCDEͰࢉग़ IUUQTXXXXPSH53DTTDBTDBEF
23. Layout, Paint
24. ϨϯμϦϯάͷྲྀΕ
25. Layout (Reflow) • Render Treeʹ͸Ґஔ΍αΠζͷ৘ใ͕ͳ͍ͷͰɺ͜͜ Ͱ֤DOMཁૉͷҐஔΛܾఆ͢Δ • DOMͷૢ࡞, ΢Οϯυ΢ͷϦαΠζ, εΫϩʔϧͷͨͼ ʹൃੜ • ஗͍ཁҼ͸ओʹ͍ͭ͜
26. Paint • color, background-colorͳͲͷࢹ֮తͳελΠϧ • ࢹ֮తͳ৘ใͳͷͰɺͪΐͬͽΓॏ͍
27. Layout΍PaintΛҾ͖ى͜͢ݪҼ • DOMϊʔυͷ௥Ճɺมߋɺ࡟আ • εΫϩʔϧ • ελΠϧͷมߋ • :hoverٖࣅΫϥεͳͲͷΠϕϯτൃੜ
28. ͜͜·Ͱͷ·ͱΊ • CSSͷCascade Rule͸஌͓͍ͬͯͯଛ͸ͳ͍ • Layout(Reflow)͕ॏ͍ʂ͚ͩ஌͍ͬͯΕ͹େৎ෉
29. ύϑΥʔϚϯε޲্
30. Layoutճ਺ΛݮΒ͢ • ʮvisiblity: hiddenʯ < ʮdisplay: noneʯ • ʮposition:fixedʯͷݻఆϨΠΞ΢τ͸ෛՙେ • ϒϥ΢βʹैॱʹ 1BJOU -BZPVU
    1BJOU εΫϩʔϧͷͨͼʹ-BZPVU Ұճ͔͠-BZPVU͠ͳ͍
31. ·ͱΊ • ໦ߏ଄ͱ͔େֶͰษڧ͠ͱ͍ͨΒ͍͔ͭ໾ཱ ͭʢద౰ʣ • ָ͍͠ • https://developers.google.com/web/ fundamentals/performance/rendering/?hl=ja
32. ͋Γ͕ͱ͏͍͟͝·ͨ͠
33. DOM͸๩͍͠ • DOMཁૉͷมߋ΍௥Ճ͕͋ͬͨ࣌ͷॲཧ • DOM͕໦ߏ଄͔ͷνΣοΫ • DOMͷ୳ࡧ • ໦ߏ଄ͷมԽͷ௨஌ • Render Treeߏ੒, Layout, Paint… • ͳΜ͔๩ͦ͠͏ • มߋ෦෼͚ͩҰؾʹૹΕͳ͍ͷ͔ͳ(´ɾωɾʆ)
34. Virtual DOM
35. Virtual DOM • DOMΛ࡞Δͷʹඞཁͳ৘ใΛ࣋ͭjsΦϒδΣΫτ • جຊతͳػೳ • Virtual DOMʹରͯ͠ૢ࡞Λߦ͏ͱɺૢ࡞લͱૢ࡞ޙͷࠩ෼৘ ใ͔Βద੾ʹDOMͷߋ৽ૢ࡞Λߦ͏
36. Virtual DOM : Update previous current Virtual DOM DOM diff patch apply
37. Virtual DOMͷ࣮૷ • React.js • virtual-dom • Mithril.js etc.
38. Virtual DOMͷ໰୊఺ • Virtual DOMΛߋ৽͢ΔࡍʹVirtual DOM TreeΛ2ͭ࡞ Δඞཁ͕ੜ͡Δ • ͜Ε͸ϝϞϦΛѹഭͤ͞ΔཁҼʹͳΔ
39. Incremental DOM
40. Incremental DOM • جຊతͳߟ͑ํ͸virtual DOMͱಉ͡ • ৽͍͠(Virtual) DOM TreeΛ࡞Γͳ͕Βɺ(࣮ࡍͷ) DOM TreeΛwalkͭͭ͠มߋ͍ͯ͘͠ͷͰϝϞϦʹ༏͍͠ • Virtual DOMͷΑ͏ʹมߋલͱมߋޙͷ̎ͭͷԾ૝DOM Tree͕ඞཁͳ͍
41. Incremental DOM : update Virtual DOM DOM diff patch diff Meta Meta Meta Meta Meta Meta apply compare compare compare compare compare compare
42. ࢀߟจݙ • https://www.html5rocks.com/ja/tutorials/ internals/howbrowserswork/ • http://steps.dodgson.org/b/2014/12/11/ why-is-real-dom-slow/ • https://developers.google.com/web/ fundamentals/performance/rendering/?hl=ja