ブラウザの仕組みを完全に理解する / Fully understand how browsers work

1. ϒϥ΢βͷ࢓૊ΈΛ׬શʹཧղ ͢Δ 2020.01.23 giftee techbash @yashi848484
2. ࣗݾ঺հ • ΍͠ @yashi848484 • Like: frontend • Love: ΀Α΀Α • Recent: ࣾ಺ͷಉ྅ʹ(ͳ͔ͥ)ݹגѻ͍͞ΕΔ
3. ͜ͷൃදͷ໨త • ϒϥ΢βͷ࢓૊ΈͷதͰ΋ɺϨϯμϦϯάͷ࢓૊ΈͱJS͕ಈ͘ ࢓૊ΈΛཧղ͢Δ
4. ஫ҙ఺ • ϒϥ΢βͷ࢓༷͸ɺʮ͜͏ͳͬͯͳ͚Ε͹ͳΒͳ͍ʯͱఆΊΒΕ͍ͯΔ΋ ͷͰ͸͋Γ·ͤΜ • Ұ෦ಛఆͷϒϥ΢β΍ΤϯδϯʹಛԽͨ͠࿩Λ͠·͢ • ϒϥ΢β(Τϯδϯ)ͷ࢓༷͸ɺ೥ʑมߋ͞Εଓ͚͍ͯ·͢ • →৘ใ͕ࡨ૰͓ͯ͠Γɺࠞཚɾɾɾɻ • →ؒҧ͍͋Ε͹ࢦఠ͍ͩ͘͞ʂ
5. ϒϥ΢βͷओཁͳίϯϙʔωϯτ https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda
6. ϒϥ΢βͷओཁͳίϯϙʔωϯτ • User Interface: ΞυϨεόʔ΍໭ΔϘλϯ౳ͷϒϥ΢β্ͷΠϯλʔϑΣʔε • Rendering engine: HTMLΛղੳͯ͠ը໘ʹදࣔ͢Δ΋ͷ(ޙड़) • Browser engine: UIͱRendering engineͷ৘ใड͚౉͠ • Networking: httpϦΫΤετ͢Δ • JavaScript engine: jsΛಈ͔͢(ޙड़) • UI backend: νΣοΫϘοΫεͳͲͷඳը • Data persistence: cookieͳͲͷอଘ৔ॴ
7. Rendering Engine Browser Rendering Engine Chrome(Chromiumܥ) Blink Firefox Gecko + Servo Safari Webkit Edge EdgeHTML(࣍ੈ୅͸ଟ෼Blink) IE Trident ※ͨͩ͠ɺiOSͷ৔߹͸શͯWebkit
8. JavaScript Engine Browser JavaScript Engine Chrome(Chromiumܥ) V8 Firefox Spider Monkey Safari JavaScript Core(Nitro) Edge Chakra IE Chakra
9. Rendering engine (Blink)
10. Renderingͱ͸
11. Rendering pipeline(Blink) Parse DOM Style Layout Paint
12. Rendering: Parse • μ΢ϯϩʔυ֤ͨ͠छϦιʔεΛύʔε͢Δ Parse DOM Style Layout Paint
13. Rendering: ParseʙDOM • HTMLΛύʔεͯ͠ɺDOMΛ࡞Δ • ͜ͷͱ͖<link><script><img>͕͋Ε͹ɺ֎෦ϦιʔεΛ download͢Δ • inline scriptΛݟ͚ͭͨ৔߹͸ɺઌʹjsίʔυΛload&ղੳ͢ Δ • js͕DOMߏ଄Λมߋ͢ΔՄೳੑ͕͋ΔͨΊ • <script>ʹasync΍deferΛ෇͚ͯ͜ΕΛճආͰ͖Δ Parse DOM Style Layout Paint
14. Rendering: ParseʙStyle • CSSΛύʔεͯ͠ɺCSSOMΛ࡞Δ • Chrome dev toolͷElements→ComputedͰݟ͑Δ Parse DOM Style Layout Paint
15. Rendering: Layout Parse DOM Style Layout Paint
16. Rendering: Layout • DOM + CSSOM = Layout Tree • DOMͱࣅ͍ͯΔ͕ɺϖʔδʹදࣔ͞ΕΔ΋ͷͷΈؚ͕·ΕΔ • ྫ) • display: none→ؚ·Εͳ͍ • visibility: hidden→ؚ·ΕΔ • p::before(content: “Puyo”)→ٖࣅΫϥεͷcontent΋ؚ·ΕΔ • ଞɺrendering͢ΔҐஔͷઈର࠲ඪ΁ͷม׵΋ߦ͏(cssͰ͸਌ཁૉ͔Βͷ૬ର࠲ඪ) Parse DOM Style Layout Paint
17. Rendering: Paint • ඳըॱͷߟྀ͕ඞཁˠz-index Parse DOM Style Layout Paint
18. Rendering pipeline(Blink) Parse DOM Style Layout Paint Main thread Commit Tiling Raster Activate Draw Compositor thread
19. Compositor thread • 1εϨουͷΈͩͱɺྫ͑͹jsͰॏ͍ॲཧΛ࣮ߦ͍ͯ͠Δ৔߹ͳ ͲʹεΫϩʔϧ͢ΒͰ͖ͳ͍ঢ়ଶʹͳͬͯ͠·͏ • ͦ͜ͰɺεΫϩʔϧ΍ζʔϜͳͲͷॲཧΛผεϨουʹಀ͕͠ ͍ͯΔ
20. Rendering: Commit • Main threadͷ݁Ռ(paintͷoutput)Λɺcompositor threadʹ౉͢ Commit Tiling Raster Activate Draw
21. Rendering: Tiling • ϨΠϠʔΛλΠϧঢ়ʹ෼ׂ͢Δ Commit Tiling Raster Activate Draw
22. Rendering: Raster • ֤λΠϧΛϥελϥΠζ͢Δ • ϥελϥΠζ: දࣔ಺༰ΛσΟεϓϨΠͷϐΫηϧʹམͱ ͠ࠐΉ͜ͱ • ϥελϥΠζͨ݁͠Ռ͸ɺGPU memoryʹஔ͔ΕΔ Commit Tiling Raster Activate Draw
23. Rendering: Draw • શͯͷλΠϧ͕ϥελϥΠζ͞ΕͨޙɺquadΛੜ੒͢Δ • quad: ը໘ͷಛఆͷ৔ॴʹλΠϧΛඳͨ͘Ίͷ΋ͷ • ͞ΒʹɺquadΛwrapͨ͠ΦϒδΣΫτ͕GPUϓϩηε ʹૹΒΕΔ Commit Tiling Raster Activate Draw
24. Rendering: Activate • ͋ΔίϛοτΛඳը͍ͯ͠Δؒʹɺ࣍ͷίϛοτͷtiling Λߦ͍͍ͨ • ͦͷͨΊɺcompositor threadʹ͸layer tree͕2ͭ͋Δ • layer tree͸࠷ॳpending treeɺactivationʹΑΓactive treeͱͳΔ Commit Tiling Raster Activate Draw
25. Rendering pipeline(Blink)(࠶ܝ) Parse DOM Style Layout Paint Main thread Commit Tiling Raster Activate Draw Compositor thread
26. JavaScript engine (V8)
27. JavaScript engineͱ͸ • (ͬ͘͟Γݴ͏ͱ)jsίʔυΛػցޠʹ຋༁ͯ͠ಈ͔ͨ͢Ίͷ΋ͷ
28. V8ͱ͸ • Chrome(Chromiumܥ)ϒϥ΢βͰ࢖ΘΕ͍ͯΔjsΤϯδϯ • Node.jsͰ΋࢖ΘΕ͍ͯΔ
29. V8 pipeline
30. ParseʙAST • JSίʔυΛParseͯ͠ɺASTΛ࡞Δ • AST: Abstract Syntax Tree(ந৅ߏจ໦) • jsίʔυͷΧλνΛදͨ͠tree Parse AST Ignition TurboFan Machine Code Byte Code
31. ASTͱ͸ https://efcl.info/2016/03/06/ast-first-step/ Parse AST Ignition TurboFan Machine Code Byte Code
32. Ignitionͱ͸ • V8ʹ͋ΔΠϯλϓϦλ • AST͔ΒByteCodeΛੜ੒ Parse AST Ignition TurboFan Machine Code Byte Code
33. Ignition pipeline https://docs.google.com/presentation/d/1HgDDXBYqCJNasBKBDf9szap1j4q4wnSHhOYpaNy5mHU Parse AST Ignition TurboFan Machine Code Byte Code
34. TurboFanͱ͸ • V8ʹ͋Δɺ(bytecodeͷ)࠷దԽΛߦ͏ίϯύΠϥ • ʮSea of Nodesʯͱ͍͏֓೦ʹج͍͍ͮͯΔ • https://darksi.de/d.sea-of-nodes/ • ৗʹશͯͷίʔυΛ࠷దԽ͢ΔΘ͚Ͱ͸ͳ͍ • ࠷ऴతʹ͸Machine CodeΛੜ੒͢Δ Parse AST Ignition TurboFan Machine Code Byte Code
35. TurboFan pipeline Parse AST Ignition TurboFan Machine Code Byte Code
36. ࠷దԽʁ • ؔ਺ݺͼग़͠ͷinlineԽ • ౸ୡ͠ͳ͍ίʔυ(node)ͷ࡟আ • ܕʹج͍ͮͯࣜ΍໋ྩΛΑΓ؆୯ͳॲཧʹஔ׵͢Δ • ແବͳ஋ͷಡΈग़͠Λ࡟আ • etc… Parse AST Ignition TurboFan Machine Code Byte Code
37. Hidden Class • V8Ͱ͸ɺΦϒδΣΫτͷߏ଄ΛܕͷΑ͏ʹѻ͏ • jsίʔυ্Ͱ͸ผΦϒδΣΫτͰ͋ͬͯ΋ɺߏ଄͕ಉ͡ ͳΒHidden Class͸ಉ͡΋ͷΛڞ༗͢Δ • ϓϩύςΟͷ૿ݮ͕͋ͬͨ৔߹ʹ͸ɺ૿͑ͨ෦෼ͷΈ ͷ৽͍͠Hidden ClassΛੜ੒͢Δ Parse AST Ignition TurboFan Machine Code Byte Code
38. Deoptimization • ࠷దԽޙͷίʔυʹ༧ظͤ͵஋͕౉ͬͨ৔߹ʹɺ࠶౓ ίϯύΠϧ͠௚͢ػೳ • ΋ͪΖΜൃੜ͠ͳ͍΄͏͕ྑ͍ • ൃੜ͢Δྫˠ https://speakerdeck.com/brn/source- to-binary-journey-of-v8-javascript-engine?slide=101 Parse AST Ignition TurboFan Machine Code Byte Code
39. ·ͱΊ • rendering͸ɺmain threadͱcompositor threadͷ2ͭͰߦ͍ͬͯΔ • ్தͷ݁Ռ͕ͦͷޙͷॲཧʹϦϨʔ͞ΕΔͨΊɺDOM΍CSSOMͷมߋ͕ සൟʹൃੜ͢Δͱrenderingίετ͕ߴ͘ͳΔ • js engine͸ɺେ·͔ʹ͸ASTͷੜ੒ˠByteCodeͷੜ੒ˠػցޠ΁຋༁ ͱ ͍ͬͨྲྀΕ • jsʹ͓͚ΔܕͱV8಺ͰѻΘΕΔܕ͸ҟͳΔ
40. Appendix
41. ࢀߟ • 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
42. ࢀߟ • 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/