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
78
ブラウザの仕組みを完全に理解する / Fully understand how browsers work
やし
January 23, 2020
Tweet
Share
More Decks by やし
See All by やし
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
260
Rust 探訪 / rust-chotto-wakaru
yashi8484
0
67
Web Frontend ビルドツールの過去と現在と未来 / The Past, Present, and Future of Web Frontend Build Tools
yashi8484
0
620
Svelteで作るWebComponents / svelte-web-components
yashi8484
2
2.1k
『保守性の高いcssを書く』という不可能に立ち向かう
yashi8484
0
690
Other Decks in Technology
See All in Technology
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
170
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
260
A2Aのクライアントを自作する
rynsuke
1
170
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
110
OpenHands🤲にContributeしてみた
kotauchisunsun
1
430
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.9k
HiMoR: Monocular Deformable Gaussian Reconstruction with Hierarchical Motion Representation
spatial_ai_network
0
110
Delegating the chores of authenticating users to Keycloak
ahus1
0
120
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
150
生成AIでwebアプリケーションを作ってみた
tajimon
2
150
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
140
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
730
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Producing Creativity
orderedlist
PRO
346
40k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Faster Mobile Websites
deanohume
307
31k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Navigating Team Friction
lara
187
15k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
GraphQLとの向き合い方2022年版
quramy
48
14k
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/