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 browsers work
Search
やし
January 23, 2020
Technology
0
64
ブラウザの仕組みを完全に理解する / Fully understand how browsers work
やし
January 23, 2020
Tweet
Share
More Decks by やし
See All by やし
Rust 探訪 / rust-chotto-wakaru
yashi8484
0
53
Web Frontend ビルドツールの過去と現在と未来 / The Past, Present, and Future of Web Frontend Build Tools
yashi8484
0
490
Svelteで作るWebComponents / svelte-web-components
yashi8484
2
1.7k
『保守性の高いcssを書く』という不可能に立ち向かう
yashi8484
0
540
Other Decks in Technology
See All in Technology
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
280
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
160
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
760
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
Featured
See All Featured
How to name files
jennybc
67
96k
We Have a Design System, Now What?
morganepeng
46
7k
Visualization
eitanlees
139
14k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Making Projects Easy
brettharned
111
5.7k
Thoughts on Productivity
jonyablonski
64
4.1k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Practical Orchestrator
shlominoach
185
10k
Web Components: a chance to create the future
zenorocha
307
41k
The Language of Interfaces
destraynor
151
23k
Code Review Best Practice
trishagee
58
16k
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/