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

Transcript

1. ϒϥ΢βͷ࢓૊ΈΛ׬શʹཧղ
   ͢Δ
   2020.01.23 giftee techbash
   @yashi848484
   

   View Slide

2. ࣗݾ঺հ
   • ΍͠ @yashi848484
   • Like: frontend
   • Love: ΀Α΀Α
   • Recent: ࣾ಺ͷಉ྅ʹ(ͳ͔ͥ)ݹגѻ͍͞ΕΔ
   

   View Slide

3. ͜ͷൃදͷ໨త
   • ϒϥ΢βͷ࢓૊ΈͷதͰ΋ɺϨϯμϦϯάͷ࢓૊ΈͱJS͕ಈ͘
   ࢓૊ΈΛཧղ͢Δ
   

   View Slide

4. ஫ҙ఺
   • ϒϥ΢βͷ࢓༷͸ɺʮ͜͏ͳͬͯͳ͚Ε͹ͳΒͳ͍ʯͱఆΊΒΕ͍ͯΔ΋
   ͷͰ͸͋Γ·ͤΜ
   • Ұ෦ಛఆͷϒϥ΢β΍ΤϯδϯʹಛԽͨ͠࿩Λ͠·͢
   • ϒϥ΢β(Τϯδϯ)ͷ࢓༷͸ɺ೥ʑมߋ͞Εଓ͚͍ͯ·͢
   • →৘ใ͕ࡨ૰͓ͯ͠Γɺࠞཚɾɾɾɻ
   • →ؒҧ͍͋Ε͹ࢦఠ͍ͩ͘͞ʂ
   

   View Slide

5. ϒϥ΢βͷओཁͳίϯϙʔωϯτ
   https://blog.sessionstack.com/how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance-7b95553baeda
   

   View Slide

6. ϒϥ΢βͷओཁͳίϯϙʔωϯτ
   • User Interface: ΞυϨεόʔ΍໭ΔϘλϯ౳ͷϒϥ΢β্ͷΠϯλʔϑΣʔε
   • Rendering engine: HTMLΛղੳͯ͠ը໘ʹදࣔ͢Δ΋ͷ(ޙड़)
   • Browser engine: UIͱRendering engineͷ৘ใड͚౉͠
   • Networking: httpϦΫΤετ͢Δ
   • JavaScript engine: jsΛಈ͔͢(ޙड़)
   • UI backend: νΣοΫϘοΫεͳͲͷඳը
   • Data persistence: cookieͳͲͷอଘ৔ॴ
   

   View Slide

7. Rendering Engine
   Browser Rendering Engine
   Chrome(Chromiumܥ) Blink
   Firefox Gecko + Servo
   Safari Webkit
   Edge EdgeHTML(࣍ੈ୅͸ଟ෼Blink)
   IE Trident
   ※ͨͩ͠ɺiOSͷ৔߹͸શͯWebkit
   

   View Slide

8. JavaScript Engine
   Browser JavaScript Engine
   Chrome(Chromiumܥ) V8
   Firefox Spider Monkey
   Safari JavaScript Core(Nitro)
   Edge Chakra
   IE Chakra
   

   View Slide

9. Rendering engine
   (Blink)
   

   View Slide

10. Renderingͱ͸
    

    View Slide

11. Rendering pipeline(Blink)
    Parse DOM Style Layout Paint
    

    View Slide

12. Rendering: Parse
    • μ΢ϯϩʔυ֤ͨ͠छϦιʔεΛύʔε͢Δ
    Parse
    DOM
    Style
    Layout
    Paint
    

    View Slide

13. Rendering: ParseʙDOM
    • HTMLΛύʔεͯ͠ɺDOMΛ࡞Δ
    • ͜ͷͱ͖<img>͕͋Ε͹ɺ֎෦ϦιʔεΛ<br/>download͢Δ<br/>• inline scriptΛݟ͚ͭͨ৔߹͸ɺઌʹjsίʔυΛload&ղੳ͢<br/>Δ<br/>• js͕DOMߏ଄Λมߋ͢ΔՄೳੑ͕͋ΔͨΊ<br/>• <script>ʹasync΍deferΛ෇͚ͯ͜ΕΛճආͰ͖Δ<br/>Parse<br/>DOM<br/>Style<br/>Layout<br/>Paint<br/>

    View Slide

14. Rendering: ParseʙStyle
    • CSSΛύʔεͯ͠ɺCSSOMΛ࡞Δ
    • Chrome dev toolͷElements→ComputedͰݟ͑Δ
    Parse
    DOM
    Style
    Layout
    Paint
    

    View Slide

15. Rendering: Layout
    Parse
    DOM
    Style
    Layout
    Paint
    

    View Slide

16. Rendering: Layout
    • DOM + CSSOM = Layout Tree
    • DOMͱࣅ͍ͯΔ͕ɺϖʔδʹදࣔ͞ΕΔ΋ͷͷΈؚ͕·ΕΔ
    • ྫ)
    • display: none→ؚ·Εͳ͍
    • visibility: hidden→ؚ·ΕΔ
    • p::before(content: “Puyo”)→ٖࣅΫϥεͷcontent΋ؚ·ΕΔ
    • ଞɺrendering͢ΔҐஔͷઈର࠲ඪ΁ͷม׵΋ߦ͏(cssͰ͸਌ཁૉ͔Βͷ૬ର࠲ඪ)
    Parse
    DOM
    Style
    Layout
    Paint
    

    View Slide

17. Rendering: Paint
    • ඳըॱͷߟྀ͕ඞཁˠz-index
    Parse
    DOM
    Style
    Layout
    Paint
    

    View Slide

18. Rendering pipeline(Blink)
    Parse DOM Style Layout Paint
    Main thread
    Commit Tiling Raster Activate Draw
    Compositor thread
    

    View Slide

19. Compositor thread
    • 1εϨουͷΈͩͱɺྫ͑͹jsͰॏ͍ॲཧΛ࣮ߦ͍ͯ͠Δ৔߹ͳ
    ͲʹεΫϩʔϧ͢ΒͰ͖ͳ͍ঢ়ଶʹͳͬͯ͠·͏
    • ͦ͜ͰɺεΫϩʔϧ΍ζʔϜͳͲͷॲཧΛผεϨουʹಀ͕͠
    ͍ͯΔ
    

    View Slide

20. Rendering: Commit
    • Main threadͷ݁Ռ(paintͷoutput)Λɺcompositor
    threadʹ౉͢
    Commit
    Tiling
    Raster
    Activate
    Draw
    

    View Slide

21. Rendering: Tiling
    • ϨΠϠʔΛλΠϧঢ়ʹ෼ׂ͢Δ
    Commit
    Tiling
    Raster
    Activate
    Draw
    

    View Slide

22. Rendering: Raster
    • ֤λΠϧΛϥελϥΠζ͢Δ
    • ϥελϥΠζ: දࣔ಺༰ΛσΟεϓϨΠͷϐΫηϧʹམͱ
    ͠ࠐΉ͜ͱ
    • ϥελϥΠζͨ݁͠Ռ͸ɺGPU memoryʹஔ͔ΕΔ
    Commit
    Tiling
    Raster
    Activate
    Draw
    

    View Slide

23. Rendering: Draw
    • શͯͷλΠϧ͕ϥελϥΠζ͞ΕͨޙɺquadΛੜ੒͢Δ
    • quad: ը໘ͷಛఆͷ৔ॴʹλΠϧΛඳͨ͘Ίͷ΋ͷ
    • ͞ΒʹɺquadΛwrapͨ͠ΦϒδΣΫτ͕GPUϓϩηε
    ʹૹΒΕΔ
    Commit
    Tiling
    Raster
    Activate
    Draw
    

    View Slide

24. Rendering: Activate
    • ͋ΔίϛοτΛඳը͍ͯ͠Δؒʹɺ࣍ͷίϛοτͷtiling
    Λߦ͍͍ͨ
    • ͦͷͨΊɺcompositor threadʹ͸layer tree͕2ͭ͋Δ
    • layer tree͸࠷ॳpending treeɺactivationʹΑΓactive
    treeͱͳΔ
    Commit
    Tiling
    Raster
    Activate
    Draw
    

    View Slide

25. Rendering pipeline(Blink)(࠶ܝ)
    Parse DOM Style Layout Paint
    Main thread
    Commit Tiling Raster Activate Draw
    Compositor thread
    

    View Slide

26. JavaScript engine
    (V8)
    

    View Slide

27. JavaScript engineͱ͸
    • (ͬ͘͟Γݴ͏ͱ)jsίʔυΛػցޠʹ຋༁ͯ͠ಈ͔ͨ͢Ίͷ΋ͷ
    

    View Slide

28. V8ͱ͸
    • Chrome(Chromiumܥ)ϒϥ΢βͰ࢖ΘΕ͍ͯΔjsΤϯδϯ
    • Node.jsͰ΋࢖ΘΕ͍ͯΔ
    

    View Slide

29. V8 pipeline
    

    View Slide

30. ParseʙAST
    • JSίʔυΛParseͯ͠ɺASTΛ࡞Δ
    • AST: Abstract Syntax Tree(ந৅ߏจ໦)
    • jsίʔυͷΧλνΛදͨ͠tree
    Parse
    AST
    Ignition
    TurboFan
    Machine
    Code
    Byte
    Code
    

    View Slide

31. ASTͱ͸
    https://efcl.info/2016/03/06/ast-first-step/
    Parse
    AST
    Ignition
    TurboFan
    Machine
    Code
    Byte
    Code
    

    View Slide

32. Ignitionͱ͸
    • V8ʹ͋ΔΠϯλϓϦλ
    • AST͔ΒByteCodeΛੜ੒
    Parse
    AST
    Ignition
    TurboFan
    Machine
    Code
    Byte
    Code
    

    View Slide

33. Ignition pipeline
    https://docs.google.com/presentation/d/1HgDDXBYqCJNasBKBDf9szap1j4q4wnSHhOYpaNy5mHU
    Parse
    AST
    Ignition
    TurboFan
    Machine
    Code
    Byte
    Code
    

    View Slide

34. TurboFanͱ͸
    • V8ʹ͋Δɺ(bytecodeͷ)࠷దԽΛߦ͏ίϯύΠϥ
    • ʮSea of Nodesʯͱ͍͏֓೦ʹج͍͍ͮͯΔ
    • https://darksi.de/d.sea-of-nodes/
    • ৗʹશͯͷίʔυΛ࠷దԽ͢ΔΘ͚Ͱ͸ͳ͍
    • ࠷ऴతʹ͸Machine CodeΛੜ੒͢Δ
    Parse
    AST
    Ignition
    TurboFan
    Machine
    Code
    Byte
    Code
    

    View Slide

35. TurboFan pipeline
    Parse
    AST
    Ignition
    TurboFan
    Machine
    Code
    Byte
    Code
    

    View Slide

36. ࠷దԽʁ
    • ؔ਺ݺͼग़͠ͷinlineԽ
    • ౸ୡ͠ͳ͍ίʔυ(node)ͷ࡟আ
    • ܕʹج͍ͮͯࣜ΍໋ྩΛΑΓ؆୯ͳॲཧʹஔ׵͢Δ
    • ແବͳ஋ͷಡΈग़͠Λ࡟আ
    • etc…
    Parse
    AST
    Ignition
    TurboFan
    Machine
    Code
    Byte
    Code
    

    View Slide

37. Hidden Class
    • V8Ͱ͸ɺΦϒδΣΫτͷߏ଄ΛܕͷΑ͏ʹѻ͏
    • jsίʔυ্Ͱ͸ผΦϒδΣΫτͰ͋ͬͯ΋ɺߏ଄͕ಉ͡
    ͳΒHidden Class͸ಉ͡΋ͷΛڞ༗͢Δ
    • ϓϩύςΟͷ૿ݮ͕͋ͬͨ৔߹ʹ͸ɺ૿͑ͨ෦෼ͷΈ
    ͷ৽͍͠Hidden ClassΛੜ੒͢Δ
    Parse
    AST
    Ignition
    TurboFan
    Machine
    Code
    Byte
    Code
    

    View Slide

38. Deoptimization
    • ࠷దԽޙͷίʔυʹ༧ظͤ͵஋͕౉ͬͨ৔߹ʹɺ࠶౓
    ίϯύΠϧ͠௚͢ػೳ
    • ΋ͪΖΜൃੜ͠ͳ͍΄͏͕ྑ͍
    • ൃੜ͢Δྫˠ https://speakerdeck.com/brn/source-
    to-binary-journey-of-v8-javascript-engine?slide=101
    Parse
    AST
    Ignition
    TurboFan
    Machine
    Code
    Byte
    Code
    

    View Slide

39. ·ͱΊ
    • rendering͸ɺmain threadͱcompositor threadͷ2ͭͰߦ͍ͬͯΔ
    • ్தͷ݁Ռ͕ͦͷޙͷॲཧʹϦϨʔ͞ΕΔͨΊɺDOM΍CSSOMͷมߋ͕
    සൟʹൃੜ͢Δͱrenderingίετ͕ߴ͘ͳΔ
    • js engine͸ɺେ·͔ʹ͸ASTͷੜ੒ˠByteCodeͷੜ੒ˠػցޠ΁຋༁ ͱ
    ͍ͬͨྲྀΕ
    • jsʹ͓͚ΔܕͱV8಺ͰѻΘΕΔܕ͸ҟͳΔ
    

    View Slide

40. Appendix
    

    View Slide

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
    

    View Slide

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/
    

    View Slide