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
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.2k
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
320
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
160
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
230
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
450
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
Improving my own Ruby thereafter
sisshiki1969
1
160
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
160
🔨 小さなビルドシステムを作る
momeemt
4
680
Featured
See All Featured
The Language of Interfaces
destraynor
161
25k
Docker and Python
trallard
45
3.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
What's in a price? How to price your products and services
michaelherold
246
12k
Why Our Code Smells
bkeepers
PRO
339
57k
Embracing the Ebb and Flow
colly
87
4.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Writing Fast Ruby
sferik
628
62k
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