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
ブラウザの仕組みを完全に理解する / Fully understand how browser...
Search
やし
January 23, 2020
Technology
0
84
ブラウザの仕組みを完全に理解する / Fully understand how browsers work
やし
January 23, 2020
Tweet
Share
More Decks by やし
See All by やし
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
340
Rust 探訪 / rust-chotto-wakaru
yashi8484
0
68
Web Frontend ビルドツールの過去と現在と未来 / The Past, Present, and Future of Web Frontend Build Tools
yashi8484
0
660
Svelteで作るWebComponents / svelte-web-components
yashi8484
2
2.2k
『保守性の高いcssを書く』という不可能に立ち向かう
yashi8484
0
730
Other Decks in Technology
See All in Technology
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
210
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
コンパウンド組織のCRE #cre_meetup
layerx
PRO
1
270
マルチエージェントのチームビルディング_2025-10-25
shinoyamada
0
190
Azure Well-Architected Framework入門
tomokusaba
1
130
激動の時代を爆速リチーミングで乗り越えろ
sansantech
PRO
1
120
Retrospectiveを振り返ろう
nakasho
0
120
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
150
プロファイルとAIエージェントによる効率的なデバッグ / Effective debugging with profiler and AI assistant
ymotongpoo
1
260
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
7
3.5k
serverless team topology
_kensh
3
230
入院医療費算定業務をAIで支援する:包括医療費支払い制度とDPCコーディング (公開版)
hagino3000
0
110
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Code Reviewing Like a Champion
maltzj
526
40k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Become a Pro
speakerdeck
PRO
29
5.6k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
The World Runs on Bad Software
bkeepers
PRO
72
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Transcript
ϒϥβͷΈΛશʹཧղ ͢Δ 2020.01.23 giftee techbash @yashi848484
ࣗݾհ • ͠ @yashi848484 • Like: frontend • Love: ΑΑ
• Recent: ࣾͷಉ྅ʹ(ͳ͔ͥ)ݹגѻ͍͞ΕΔ
͜ͷൃදͷత • ϒϥβͷΈͷதͰɺϨϯμϦϯάͷΈͱJS͕ಈ͘ ΈΛཧղ͢Δ
ҙ • ϒϥβͷ༷ɺʮ͜͏ͳͬͯͳ͚ΕͳΒͳ͍ʯͱఆΊΒΕ͍ͯΔ ͷͰ͋Γ·ͤΜ • Ұ෦ಛఆͷϒϥβΤϯδϯʹಛԽͨ͠Λ͠·͢ • ϒϥβ(Τϯδϯ)ͷ༷ɺʑมߋ͞Εଓ͚͍ͯ·͢ • →ใ͕ࡨ૰͓ͯ͠Γɺࠞཚɾɾɾɻ
• →ؒҧ͍͋Εࢦఠ͍ͩ͘͞ʂ
ϒϥβͷओཁͳίϯϙʔωϯτ https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda
ϒϥβͷओཁͳίϯϙʔωϯτ • User Interface: ΞυϨεόʔΔϘλϯͷϒϥβ্ͷΠϯλʔϑΣʔε • Rendering engine: HTMLΛղੳͯ͠ը໘ʹදࣔ͢Δͷ(ޙड़) •
Browser engine: UIͱRendering engineͷใड͚͠ • Networking: httpϦΫΤετ͢Δ • JavaScript engine: jsΛಈ͔͢(ޙड़) • UI backend: νΣοΫϘοΫεͳͲͷඳը • Data persistence: cookieͳͲͷอଘॴ
Rendering Engine Browser Rendering Engine Chrome(Chromiumܥ) Blink Firefox Gecko +
Servo Safari Webkit Edge EdgeHTML(࣍ੈଟBlink) IE Trident ※ͨͩ͠ɺiOSͷ߹શͯWebkit
JavaScript Engine Browser JavaScript Engine Chrome(Chromiumܥ) V8 Firefox Spider Monkey
Safari JavaScript Core(Nitro) Edge Chakra IE Chakra
Rendering engine (Blink)
Renderingͱ
Rendering pipeline(Blink) Parse DOM Style Layout Paint
Rendering: Parse • μϯϩʔυ֤ͨ͠छϦιʔεΛύʔε͢Δ Parse DOM Style Layout Paint
Rendering: ParseʙDOM • HTMLΛύʔεͯ͠ɺDOMΛ࡞Δ • ͜ͷͱ͖<link><script><img>͕͋Εɺ֎෦ϦιʔεΛ download͢Δ • inline scriptΛݟ͚ͭͨ߹ɺઌʹjsίʔυΛload&ղੳ͢
Δ • js͕DOMߏΛมߋ͢ΔՄೳੑ͕͋ΔͨΊ • <script>ʹasyncdeferΛ͚ͯ͜ΕΛճආͰ͖Δ Parse DOM Style Layout Paint
Rendering: ParseʙStyle • CSSΛύʔεͯ͠ɺCSSOMΛ࡞Δ • Chrome dev toolͷElements→ComputedͰݟ͑Δ Parse DOM
Style Layout Paint
Rendering: Layout Parse DOM Style Layout Paint
Rendering: Layout • DOM + CSSOM = Layout Tree •
DOMͱࣅ͍ͯΔ͕ɺϖʔδʹදࣔ͞ΕΔͷͷΈؚ͕·ΕΔ • ྫ) • display: none→ؚ·Εͳ͍ • visibility: hidden→ؚ·ΕΔ • p::before(content: “Puyo”)→ٖࣅΫϥεͷcontentؚ·ΕΔ • ଞɺrendering͢ΔҐஔͷઈର࠲ඪͷมߦ͏(cssͰཁૉ͔Βͷ૬ର࠲ඪ) Parse DOM Style Layout Paint
Rendering: Paint • ඳըॱͷߟྀ͕ඞཁˠz-index Parse DOM Style Layout Paint
Rendering pipeline(Blink) Parse DOM Style Layout Paint Main thread Commit
Tiling Raster Activate Draw Compositor thread
Compositor thread • 1εϨουͷΈͩͱɺྫ͑jsͰॏ͍ॲཧΛ࣮ߦ͍ͯ͠Δ߹ͳ ͲʹεΫϩʔϧ͢ΒͰ͖ͳ͍ঢ়ଶʹͳͬͯ͠·͏ • ͦ͜ͰɺεΫϩʔϧζʔϜͳͲͷॲཧΛผεϨουʹಀ͕͠ ͍ͯΔ
Rendering: Commit • Main threadͷ݁Ռ(paintͷoutput)Λɺcompositor threadʹ͢ Commit Tiling Raster Activate
Draw
Rendering: Tiling • ϨΠϠʔΛλΠϧঢ়ʹׂ͢Δ Commit Tiling Raster Activate Draw
Rendering: Raster • ֤λΠϧΛϥελϥΠζ͢Δ • ϥελϥΠζ: දࣔ༰ΛσΟεϓϨΠͷϐΫηϧʹམͱ ͠ࠐΉ͜ͱ • ϥελϥΠζͨ݁͠ՌɺGPU
memoryʹஔ͔ΕΔ Commit Tiling Raster Activate Draw
Rendering: Draw • શͯͷλΠϧ͕ϥελϥΠζ͞ΕͨޙɺquadΛੜ͢Δ • quad: ը໘ͷಛఆͷॴʹλΠϧΛඳͨ͘Ίͷͷ • ͞ΒʹɺquadΛwrapͨ͠ΦϒδΣΫτ͕GPUϓϩηε ʹૹΒΕΔ
Commit Tiling Raster Activate Draw
Rendering: Activate • ͋ΔίϛοτΛඳը͍ͯ͠Δؒʹɺ࣍ͷίϛοτͷtiling Λߦ͍͍ͨ • ͦͷͨΊɺcompositor threadʹlayer tree͕2ͭ͋Δ •
layer tree࠷ॳpending treeɺactivationʹΑΓactive treeͱͳΔ Commit Tiling Raster Activate Draw
Rendering pipeline(Blink)(࠶ܝ) Parse DOM Style Layout Paint Main thread Commit
Tiling Raster Activate Draw Compositor thread
JavaScript engine (V8)
JavaScript engineͱ • (ͬ͘͟Γݴ͏ͱ)jsίʔυΛػցޠʹ༁ͯ͠ಈ͔ͨ͢Ίͷͷ
V8ͱ • Chrome(Chromiumܥ)ϒϥβͰΘΕ͍ͯΔjsΤϯδϯ • Node.jsͰΘΕ͍ͯΔ
V8 pipeline
ParseʙAST • JSίʔυΛParseͯ͠ɺASTΛ࡞Δ • AST: Abstract Syntax Tree(நߏจ) • jsίʔυͷΧλνΛදͨ͠tree
Parse AST Ignition TurboFan Machine Code Byte Code
ASTͱ https://efcl.info/2016/03/06/ast-first-step/ Parse AST Ignition TurboFan Machine Code Byte Code
Ignitionͱ • V8ʹ͋ΔΠϯλϓϦλ • AST͔ΒByteCodeΛੜ Parse AST Ignition TurboFan Machine
Code Byte Code
Ignition pipeline https://docs.google.com/presentation/d/1HgDDXBYqCJNasBKBDf9szap1j4q4wnSHhOYpaNy5mHU Parse AST Ignition TurboFan Machine Code Byte
Code
TurboFanͱ • V8ʹ͋Δɺ(bytecodeͷ)࠷దԽΛߦ͏ίϯύΠϥ • ʮSea of Nodesʯͱ͍͏֓೦ʹج͍͍ͮͯΔ • https://darksi.de/d.sea-of-nodes/ •
ৗʹશͯͷίʔυΛ࠷దԽ͢ΔΘ͚Ͱͳ͍ • ࠷ऴతʹMachine CodeΛੜ͢Δ Parse AST Ignition TurboFan Machine Code Byte Code
TurboFan pipeline Parse AST Ignition TurboFan Machine Code Byte Code
࠷దԽʁ • ؔݺͼग़͠ͷinlineԽ • ౸ୡ͠ͳ͍ίʔυ(node)ͷআ • ܕʹج໋͍ͮͯࣜྩΛΑΓ؆୯ͳॲཧʹஔ͢Δ • ແବͳͷಡΈग़͠Λআ •
etc… Parse AST Ignition TurboFan Machine Code Byte Code
Hidden Class • V8ͰɺΦϒδΣΫτͷߏΛܕͷΑ͏ʹѻ͏ • jsίʔυ্ͰผΦϒδΣΫτͰ͋ͬͯɺߏ͕ಉ͡ ͳΒHidden Classಉ͡ͷΛڞ༗͢Δ • ϓϩύςΟͷ૿ݮ͕͋ͬͨ߹ʹɺ૿͑ͨ෦ͷΈ
ͷ৽͍͠Hidden ClassΛੜ͢Δ Parse AST Ignition TurboFan Machine Code Byte Code
Deoptimization • ࠷దԽޙͷίʔυʹ༧ظͤ͵͕ͬͨ߹ʹɺ࠶ ίϯύΠϧ͢͠ػೳ • ͪΖΜൃੜ͠ͳ͍΄͏͕ྑ͍ • ൃੜ͢Δྫˠ https://speakerdeck.com/brn/source- to-binary-journey-of-v8-javascript-engine?slide=101
Parse AST Ignition TurboFan Machine Code Byte Code
·ͱΊ • renderingɺmain threadͱcompositor threadͷ2ͭͰߦ͍ͬͯΔ • ్தͷ݁Ռ͕ͦͷޙͷॲཧʹϦϨʔ͞ΕΔͨΊɺDOMCSSOMͷมߋ͕ සൟʹൃੜ͢Δͱrenderingίετ͕ߴ͘ͳΔ • js
engineɺେ·͔ʹASTͷੜˠByteCodeͷੜˠػցޠ༁ ͱ ͍ͬͨྲྀΕ • jsʹ͓͚ΔܕͱV8ͰѻΘΕΔܕҟͳΔ
Appendix
ࢀߟ • https://v8.dev/docs • https://qiita.com/umashiba/items/8cb47825624c5cb043d6 • https://qiita.com/tsin1rou/items/d4c781a2f25e2b92fa5e • https://qiita.com/pink/items/a54b8cadbe39a06956a9 •
https://docs.google.com/presentation/d/ 1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit#slide=id.g60f92a5151_40_333 • https://gigazine.net/news/20180323-rendering-engine/ • https://developers.google.com/web/updates/2018/09/inside-browser-part1
ࢀߟ • https://efcl.info/2016/03/06/ast-first-step/ • https://docs.google.com/presentation/d/1x2clfAPR9F83cBcmztFRXMnUw3pFX8QGdmXTMcIph4Y/ edit#slide=id.g7a686b0686_0_3 • https://medium.com/@MQuy90/v8-engine-overview-7c965731ced4 • https://speakerdeck.com/brn/source-to-binary-journey-of-v8-javascript-engine
• https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write- optimized-code-ac089e62b12e • https://docs.google.com/presentation/d/1HgDDXBYqCJNasBKBDf9szap1j4q4wnSHhOYpaNy5mHU • https://darksi.de/d.sea-of-nodes/