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
70
ブラウザの仕組みを完全に理解する / Fully understand how browsers work
やし
January 23, 2020
Tweet
Share
More Decks by やし
See All by やし
Rust 探訪 / rust-chotto-wakaru
yashi8484
0
61
Web Frontend ビルドツールの過去と現在と未来 / The Past, Present, and Future of Web Frontend Build Tools
yashi8484
0
570
Svelteで作るWebComponents / svelte-web-components
yashi8484
2
1.9k
『保守性の高いcssを書く』という不可能に立ち向かう
yashi8484
0
620
Other Decks in Technology
See All in Technology
スクラムマスターの活動と組織からの期待のズレへの対応 / Dealing with the gap between Scrum Master activities and organizational expectations
pauli
2
1k
Plants vs thieves: Automated Tests in the World of Web Security
leichteckig
0
140
Microsoft Ignite 2024 最新情報!Microsoft 365 Agents SDK 概要 / Microsoft Ignite 2024 latest news Microsoft 365 Agents SDK overview
karamem0
0
180
CNAPPから考えるAWSガバナンスの実践と最適化
nrinetcom
PRO
1
290
20250122_FinJAWS
takuyay0ne
2
360
一人から始めたSREチーム3年の歩み - 求められるスキルの変化とチームのあり方 - / The three-year journey of the SRE team, which started all by myself
vtryo
7
5.1k
MicrosoftのOSSだけでAIによるブラウザテストを構成する
ymd65536
1
240
HCP TerraformとAzure:イオンスマートテクノロジーのインフラ革新 / HCP Terraform and Azure AEON Smart Technology's Infrastructure Innovation
aeonpeople
3
890
2025/1/29 BigData-JAWS 勉強会 #28 (re:Invent 2024 re:Cap)/new-feature-preview-q-in-quicksight-scenarios-tried-and-tested
emiki
0
290
パブリッククラウドのプロダクトマネジメントとアーキテクト
tagomoris
3
250
Oracle Cloud Infrastructure:2025年1月度サービス・アップデート
oracle4engineer
PRO
0
110
Women in Agile
kawaguti
PRO
2
150
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
GraphQLとの向き合い方2022年版
quramy
44
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
Rails Girls Zürich Keynote
gr2m
94
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
510
Designing for Performance
lara
604
68k
Music & Morning Musume
bryan
46
6.3k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Documentation Writing (for coders)
carmenintech
67
4.6k
Embracing the Ebb and Flow
colly
84
4.5k
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/