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

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

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

2f8beec432fa08727b077de27ebeb050?s=128

pokohide

April 02, 2018
Tweet

More Decks by pokohide

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

Other Decks in Programming

See All in Programming
347a1b64f3a6e38981bc99b53919e2b1?s=48 azdaroth
0
130
B793da271a45d149b52f507bca9f137c?s=48 77web
4
1.4k
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
2
2.1k
Ca91df01df9ee53c57b8c5a81aeec889?s=48 kazuki19992
0
440
04df7340898eac3a0536d3b47c55501c?s=48 hirotokirimaru
1
390
3331499a8c17bf14833f22b9173223f1?s=48 hanakla
2
3k
E473e5af1263c050599921981db46068?s=48 akatsukinewgrad
0
130
3a3c6a0c96f487521ce83b719bc25814?s=48 asumikan
0
280
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
0
350
Aa97a6ad2c4c8422f5580f4f9d5b5744?s=48 dulltz
0
410
Ad4c3c738e57a9bbcb800871e81c232d?s=48 itosho525
0
340
Ad8afdde67ccf5cccbde704dd9e35f84?s=48 jun0
3
630

Featured

See All Featured
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
207
10k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
225
8.4k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
270
16k
78b475797a14c84799063c7cd073962f?s=48 holman
448
130k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
109
11k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
240k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
92
13k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
393
60k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
295
27k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
17
630

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