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

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

2f8beec432fa08727b077de27ebeb050?s=128

pokohide

April 02, 2018
Tweet

Transcript

  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 IUNM3PPUFMFNFOU IFBE&MFNFOU CPEZFMFNFOU UJUMF&MFNFOU B&MFNFOU l0UIMP5FDIz5FYU lISFGz"UUSJCVUF lIPHFz5FYU
  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 IUNM3PPU 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