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

ϒϥ΢βͱϑϨϯζʹͳΖ͏ ※1࿩͔͠ݟͨ͜ͱͳ͍Ͱ͢

ࣗݾ঺հ • ໊લɿञҪӳ৳( Ά͜ͻͰ ) • OthloTechӡӦ୅ද • ීஈ͸WEB԰͞Μ(Ruby, Node,
React, etc…) • झຯɿөըؑ৆(Hulu), ήʔϜ࣮گ(ఋऀ), ςχε IZEFBCMF IZEF

ϒϥ΢βͱϑϨϯζʹͳΖ͏ ※1࿩͔͠ݟͨ͜ͱͳ͍Ͱ͢

Browser

Browser • Firefox, Chrome, Safari ʢOpen Sourceʣ • WEBϖʔδͱ͔දࣔ͢Δ΍ͭ

ϨϯμϦϯάͷྲྀΕ(Webkit)

DOM (Document Object Model)

DOM • HTML, XML౳ͷυΩϡϝϯτΛૢ࡞͢ΔͨΊͷAPI • *MLܥͷDocument͸໦ߏ଄ → DOM Tree

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

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

ղੳΞϧΰϦζϜ(HTML) • HTML͸௨ৗͷτοϓμ΢ϯύʔαʔɺϘτϜ ΞοϓύʔαʔͰ͸ղੳͰ͖ͳ͍ • ϒϥ΢βʹΑͬͯ͸ΤϥʔΛڐ༰͢Δ͔Β • JSͷdocument.writeͳͲͰղੳॲཧதʹมߋ͕ೖΔ͜ͱ͕ ͋Δ͔Β

ղੳΞϧΰϦζϜ(HTML) • ʮτʔΫϯԽʯͱʮπϦʔߏஙʯͷ2ஈ֊ )5.-࢓༷ͰղੳΞϧΰϦζϜ͕ղઆ͞Ε͍ͯ ͍ΔͷͰڵຯͷ͋Δਓ͸ݟͯΈ͍ͯͩ͘͞ IUUQTXXXXPSH538%IUNMQBSTJOHIUNM

Τϥʔͷڐ༰(HTML) • HTML࢓༷Ͱ͸Τϥʔॲཧ͸نఆ͞Ε͍ͯͳ͍ • <br> ͷ୅ΘΓͷ </br> → <br>ͱͯ͠ॲཧ •
ೖΕࢠͷϑΥʔϜཁૉ → form಺ͷform͸ແࢹ • ਂ͗͢Δλά֊૚ → ಉ͡छྨͷλάͷೖΕࢠ͸ 20·Ͱ 8FCLJUͷྫ

CSSղੳ(Webkit)

ScriptͱStyleSheetͷॲཧॱং • StyleSheet͸ཧ࿦తʹ͸DOM TreeΛߋ৽͠ͳ͍ • ղੳΛதஅ͠ͳͯ͘΋Αͦ͞͏ → NO • StyleSheetΛಡΈࠐΉ·ͰScriptΛϒϩοΫ(Firefox)
• HTML5ͳΒasyncΛ͚ͭͯɺผεϨουͰղੳ/࣮ߦ

ϨϯμϦϯάͷྲྀΕ

Render Tree • ࢹ֮తͳཁૉΛදࣔॱʹฒ΂ͨ໦ߏ଄ • DOMཁૉʹରԠ͍ͯ͠Δ͕̍ର̍Ͱ͸ͳ͍ • headཁૉ, display:noneͷཁૉ͸ؚ·Εͳ͍ •
visiblity: hiddenཁૉ͸ؚ·ΕΔ

Render Treeߏ੒ • ελΠϧγʔτͷΧεέʔυॱং • ϒϥ΢βͷએݴ • Ϣʔβʔͷ௨ৗͷએݴ • ੍࡞ऀͷ௨ৗͷએݴ
• ੍࡞ऀͷॏཁͳએݴ • Ϣʔβʔͷॏཁͳએݴ(!important) ௿ ߴ ಉ͡ॱংͷ৔߹͸ ผͷϧʔϧͰ൑அ

ηϨΫλͷಛҟੜ • HTMLͷʮstyleʯଐੑʹ͋Δ৔߹͸1, ͦΕҎ֎͸0 (=a) • ηϨΫλ಺ͷIDଐੑͷ਺ (=b) • ηϨΫλ಺ͷଞͷଐੑͱٙࣅΫϥεͷ਺
(=c) • ηϨΫλ಺ͷཁૉ໊ͱٙࣅཁૉͷ਺ (=d) YBCDEͰࢉग़ IUUQTXXXXPSH53DTTDBTDBEF

Layout, Paint

ϨϯμϦϯάͷྲྀΕ

Layout (Reﬂow) • Render Treeʹ͸Ґஔ΍αΠζͷ৘ใ͕ͳ͍ͷͰɺ͜͜ Ͱ֤DOMཁૉͷҐஔΛܾఆ͢Δ • DOMͷૢ࡞, ΢Οϯυ΢ͷϦαΠζ, εΫϩʔϧͷͨͼ
ʹൃੜ • ஗͍ཁҼ͸ओʹ͍ͭ͜

Paint • color, background-colorͳͲͷࢹ֮తͳελΠϧ • ࢹ֮తͳ৘ใͳͷͰɺͪΐͬͽΓॏ͍

Layout΍PaintΛҾ͖ى͜͢ݪҼ • DOMϊʔυͷ௥Ճɺมߋɺ࡟আ • εΫϩʔϧ • ελΠϧͷมߋ • :hoverٖࣅΫϥεͳͲͷΠϕϯτൃੜ

͜͜·Ͱͷ·ͱΊ • CSSͷCascade Rule͸஌͓͍ͬͯͯଛ͸ͳ͍ • Layout(Reﬂow)͕ॏ͍ʂ͚ͩ஌͍ͬͯΕ͹େৎ෉

ύϑΥʔϚϯε޲্

Layoutճ਺ΛݮΒ͢ • ʮvisiblity: hiddenʯ < ʮdisplay: noneʯ • ʮposition:ﬁxedʯͷݻఆϨΠΞ΢τ͸ෛՙେ •
ϒϥ΢βʹैॱʹ 1BJOU -BZPVU 1BJOU εΫϩʔϧͷͨͼʹ-BZPVU Ұճ͔͠-BZPVU͠ͳ͍

·ͱΊ • ໦ߏ଄ͱ͔େֶͰษڧ͠ͱ͍ͨΒ͍͔ͭ໾ཱ ͭʢద౰ʣ • ָ͍͠ • https://developers.google.com/web/ fundamentals/performance/rendering/?hl=ja

͋Γ͕ͱ͏͍͟͝·ͨ͠

DOM͸๩͍͠ • DOMཁૉͷมߋ΍௥Ճ͕͋ͬͨ࣌ͷॲཧ • DOM͕໦ߏ଄͔ͷνΣοΫ • DOMͷ୳ࡧ • ໦ߏ଄ͷมԽͷ௨஌ •
Render Treeߏ੒, Layout, Paint… • ͳΜ͔๩ͦ͠͏ • มߋ෦෼͚ͩҰؾʹૹΕͳ͍ͷ͔ͳ(´ɾωɾʆ)

Virtual DOM

Virtual DOM • DOMΛ࡞Δͷʹඞཁͳ৘ใΛ࣋ͭjsΦϒδΣΫτ • جຊతͳػೳ • Virtual DOMʹରͯ͠ૢ࡞Λߦ͏ͱɺૢ࡞લͱૢ࡞ޙͷࠩ෼৘ ใ͔Βద੾ʹDOMͷߋ৽ૢ࡞Λߦ͏

Virtual DOM : Update previous current Virtual DOM DOM diff
patch apply

Virtual DOMͷ࣮૷ • React.js • virtual-dom • Mithril.js etc.

Virtual DOMͷ໰୊఺ • Virtual DOMΛߋ৽͢ΔࡍʹVirtual DOM TreeΛ2ͭ࡞ Δඞཁ͕ੜ͡Δ • ͜Ε͸ϝϞϦΛѹഭͤ͞ΔཁҼʹͳΔ

Incremental DOM

Incremental DOM • جຊతͳߟ͑ํ͸virtual DOMͱಉ͡ • ৽͍͠(Virtual) DOM TreeΛ࡞Γͳ͕Βɺ(࣮ࡍͷ) DOM
TreeΛwalkͭͭ͠มߋ͍ͯ͘͠ͷͰϝϞϦʹ༏͍͠ • Virtual DOMͷΑ͏ʹมߋલͱมߋޙͷ̎ͭͷԾ૝DOM Tree͕ඞཁͳ͍

Incremental DOM : update Virtual DOM DOM diff patch diff
Meta Meta Meta Meta Meta Meta apply compare compare compare compare compare compare

ࢀߟจݙ • 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

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

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

More Decks by pokohide

Other Decks in Programming

Featured

Transcript