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
82
ブラウザの仕組みを完全に理解する / Fully understand how browsers work
やし
January 23, 2020
Tweet
Share
More Decks by やし
See All by やし
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
290
Rust 探訪 / rust-chotto-wakaru
yashi8484
0
67
Web Frontend ビルドツールの過去と現在と未来 / The Past, Present, and Future of Web Frontend Build Tools
yashi8484
0
640
Svelteで作るWebComponents / svelte-web-components
yashi8484
2
2.1k
『保守性の高いcssを書く』という不可能に立ち向かう
yashi8484
0
700
Other Decks in Technology
See All in Technology
M365アカウント侵害時の初動対応
lhazy
7
5k
MCPと認可まわりの話 / mcp_and_authorization
convto
2
270
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
8
560
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
770
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
250
Datasets for Critical Operations by Dataform
kimujun
0
110
新規事業におけるAIリサーチの活用例
ranxxx
0
170
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
540
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.3k
Tiptapで実現する堅牢で柔軟なエディター開発
kirik
1
140
OpenTelemetry の Log を使いこなそう
biwashi
5
1.1k
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
msksgm
0
290
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How GitHub (no longer) Works
holman
314
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Making Projects Easy
brettharned
116
6.3k
Embracing the Ebb and Flow
colly
86
4.8k
Side Projects
sachag
455
43k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Visualization
eitanlees
146
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/