Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブラウザとフレンズになろう
Search
pokohide
April 02, 2018
Programming
0
54
ブラウザとフレンズになろう
pokohide
April 02, 2018
Tweet
Share
More Decks by pokohide
See All by pokohide
技術的負債との付き合い方 〜プロダクトミライ会議〜
pokohide
0
130
Railsアプリで秘匿情報を環境変数からCredentialsに移行した話
pokohide
2
590
TechTrain RoRハンズオン
pokohide
0
1.3k
Other Decks in Programming
See All in Programming
Software Architecture
hschwentner
6
2.3k
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
520
CSC305 Lecture 08
javiergs
PRO
0
250
Devoxx BE 2025 Loom lab
josepaumard
0
110
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
180
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
300
技術的負債の正体を知って向き合う
irof
0
200
CSC509 Lecture 06
javiergs
PRO
0
260
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
130
Introduce Hono CLI
yusukebe
6
2.9k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
How STYLIGHT went responsive
nonsquared
100
5.8k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Typedesign – Prime Four
hannesfritz
42
2.8k
Code Review Best Practice
trishagee
72
19k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Done Done
chrislema
185
16k
Making Projects Easy
brettharned
120
6.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Unsuck your backbone
ammeep
671
58k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Transcript
ϒϥβͱϑϨϯζʹͳΖ͏ ※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
Parse
ϨϯμϦϯάͷྲྀΕ(Webkit)
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ͷྫ
ϨϯμϦϯάͷྲྀΕ(Webkit)
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 (Reflow) • Render TreeʹҐஔαΠζͷใ͕ͳ͍ͷͰɺ͜͜ Ͱ֤DOMཁૉͷҐஔΛܾఆ͢Δ • DOMͷૢ࡞, ΟϯυͷϦαΠζ, εΫϩʔϧͷͨͼ
ʹൃੜ • ͍ཁҼओʹ͍ͭ͜
Paint • color, background-colorͳͲͷࢹ֮తͳελΠϧ • ࢹ֮తͳใͳͷͰɺͪΐͬͽΓॏ͍
LayoutPaintΛҾ͖ى͜͢ݪҼ • DOMϊʔυͷՃɺมߋɺআ • εΫϩʔϧ • ελΠϧͷมߋ • :hoverٖࣅΫϥεͳͲͷΠϕϯτൃੜ
͜͜·Ͱͷ·ͱΊ • CSSͷCascade Rule͓͍ͬͯͯଛͳ͍ • Layout(Reflow)͕ॏ͍ʂ͚͍ͩͬͯΕେৎ
ύϑΥʔϚϯε্
LayoutճΛݮΒ͢ • ʮvisiblity: hiddenʯ < ʮdisplay: noneʯ • ʮposition:fixedʯͷݻఆϨΠΞτෛՙେ •
ϒϥβʹैॱʹ 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