ϒϥ΢βͷ࢓૊ΈΛ׬શʹཧղ ͢Δ 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Λ࡞Δ • ͜ͷͱ͖<img>͕͋Ε͹ɺ֎෦ϦιʔεΛ download͢Δ • inline scriptΛݟ͚ͭͨ৔߹͸ɺઌʹjsίʔυΛload&ղੳ͢ Δ • js͕DOMߏ଄Λมߋ͢ΔՄೳੑ͕͋ΔͨΊ • <script>ʹasync΍deferΛ෇͚ͯ͜ΕΛճආͰ͖Δ 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ͭͰߦ͍ͬͯΔ • ్தͷ݁Ռ͕ͦͷޙͷॲཧʹϦϨʔ͞ΕΔͨΊɺDOM΍CSSOMͷมߋ͕ සൟʹൃੜ͢Δͱ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/