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

2f8beec432fa08727b077de27ebeb050?s=47 pokohide
April 02, 2018
Programming
0
21

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

2f8beec432fa08727b077de27ebeb050?s=128

pokohide

April 02, 2018
Tweet

More Decks by pokohide

See All by pokohide
2f8beec432fa08727b077de27ebeb050?s=48 hyde2able
0
880

Other Decks in Programming

See All in Programming
9f33218af7ae5c04e102fcc3076f2f5c?s=48 yhkaplan
4
760
575ca492bac55e895d0e1c86f7d709fe?s=48 hschwentner
9
1.7k
C95cdabc569dc4c7750d776687f66037?s=48 yutannihilation
0
130
55517518e318b28906211d115c24208b?s=48 clyang
0
610
Cc8ec9594b83b5dc3c7eef345c05dc8d?s=48 shiz
9
1.2k
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
190
5ad0bb268dd2605b09165d464308cb7e?s=48 igaiga
2
120
Cd34440e6c181704f318319e131af68d?s=48 naokioouchi
1
760
0620564f0125b8b3b7f4fe40c10b8b4e?s=48 tattn
0
5k
44df43ecb9d8ae00cafee6b804db3fcd?s=48 kentatada
2
200
9f3a83db74bee75a64b5e6ed106a775c?s=48 twada
19
3.4k
1a1d418bdf51cbf8fce1317f6c80a907?s=48 satoshi0212
4
280

Featured

See All Featured
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
202
35k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
319
53k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
119
7.7k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
46k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
447
35k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
345
20k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
13
740
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
607
54k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
315
18k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
228
17k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
5
140
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
86
3.2k

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