$30 off During Our Annual Pro Sale. View Details »

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

やし
January 23, 2020

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

やし

January 23, 2020
Tweet

More Decks by やし

Other Decks in Technology

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