$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

  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/