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
120
Railsアプリで秘匿情報を環境変数からCredentialsに移行した話
pokohide
2
590
TechTrain RoRハンズオン
pokohide
0
1.3k
Other Decks in Programming
See All in Programming
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
540
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
530
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
1.4k
旅行プランAIエージェント開発の裏側
ippo012
2
910
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
330
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
230
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
Kiroで始めるAI-DLC
kaonash
2
590
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
270
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Statistics for Hackers
jakevdp
799
220k
The Pragmatic Product Professional
lauravandoore
36
6.9k
4 Signs Your Business is Dying
shpigford
184
22k
Done Done
chrislema
185
16k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Six Lessons from altMBA
skipperchong
28
4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
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