Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React製 SPA における パフォーマンスチューニング

React製 SPA における パフォーマンスチューニング

Kento TSUJI

November 23, 2018
Tweet

More Decks by Kento TSUJI

Other Decks in Technology

Transcript

  1. React੡ SPA ʹ͓͚Δ
    ύϑΥʔϚϯενϡʔχϯά
    Kento TSUJI (@maxmellon)

    Recruit Technologies Co., Ltd.

    View full-size slide

  2. ࣗݾ঺հ
    • Github: @maxmellon
    • Twitter: @maxmellon_9039
    • ϦΫϧʔτςΫϊϩδʔζ 18೥ ৽ଔೖࣾ

    ࣾձਓྺ ൒೥ʂʂʂ (Vim ྺ 5೥)
    • ޷෺: ͏ͲΜ, Vim, pipeline-operator

    View full-size slide

  3. maxmellon/vim-jsx-pretty 157 ⭐

    View full-size slide

  4. ReactύϑΥνϡهࣄͰ ͸ͯͿ500 ߦ͖·ͨ͠ ✨

    View full-size slide

  5. ͬͦ͘͞Ͱ͕͢

    View full-size slide

  6. SPAʹԿΛٻΊ·͔͢ʁ

    View full-size slide

  7. ͬ͘͘͞͞ͱ

    View full-size slide

  8. ͭ·Γ SPA ʹ
    ٻΊΒΕ͍ͯΔ΋ͷ͸
    ѹ౗తͳϢʔβʔମݧ

    View full-size slide

  9. ѹ౗తͳϢʔβʔମݧΛ
    ࣮ݱ͢Δʹ͸Կ͕ඞཁ͔ʁ

    View full-size slide

  10. ύϑΥʔϚϯε

    View full-size slide

  11. Ϧονͳදݱྗ

    View full-size slide

  12. Մ༻ੑ
    ʢΦϑϥΠϯͰ࢖͑Δʣ

    View full-size slide

  13. ࠓճ͸
    SPAʹ͓͚ΔύϑΥʔϚϯε
    ʹ͍͓ͭͯ࿩Λ͠·͢

    View full-size slide

  14. • ॳظϨϯμϦϯάͷ଎౓Λߴ଎Խ
    SPAʹ͓͚ΔύϑΥʔϚϯε

    View full-size slide

  15. SPAʹ͓͚ΔύϑΥʔϚϯε
    • ॳظϨϯμϦϯάͷ଎౓Λߴ଎Խ

    ˠ ͜Ε͸ SEO ରࡦͷҙຯ΋͋Δ

    ˠ ͜Ε͸৭ΜͳॴͰޠΒΕ͍ͯΔ


    View full-size slide

  16. SPAʹ͓͚ΔύϑΥʔϚϯε
    • ॳظϨϯμϦϯάͷ଎౓Λߴ଎Խ

    ˠ ͜Ε͸ SEO ରࡦͷҙຯ΋͋Δ

    ˠ ͜Ε͸৭ΜͳॴͰޠΒΕ͍ͯΔ

    ॏཁͰ͕͢ɺࠓ೔͸͜ͷ࿩͸͠·ͤΜ

    View full-size slide

  17. ࠓ೔࿩͢಺༰
    • ࢀߟ: ϦονͳWebΞϓϦέʔγϣϯͷͨΊͷ7ͭͷݪଇ
    • https://yosuke-furukawa.hatenablog.com/entry/
    2014/11/14/141415
    Ϣʔβʔͷೖྗʹਝ଎ʹରԠ͢Δ

    View full-size slide

  18. ϦΫϧʔτʹ͓͚ΔSPA
    • AirSHIFTͱ͍͏αʔϏε͕͋Δ
    • γϑτද͕௚ײతʹ࡞ΕΔ
    • React / Redux + BFF (redux-pluto)
    • Component ਺ ໿600 ݸͱ͍͏େن໛ͳSPA
    • ௚ײతʹγϑτΛ࡞੒͢ΔͨΊʹ

    υϥοάΞϯυυϩοϓΛ࠾༻

    View full-size slide

  19. AirSHIFT ͱ͸

    View full-size slide

  20. • γϑτදͷ࡞੒Λ࢝Ίͱͨ͠ళ௕ۀ຿ͷ

    αϙʔτ
    • ௚ײతʹૢ࡞Ͱ͖ΔΑ͏ʹ

    υϥοάΞϯυυϩοϓͳͲͷૢ࡞͕͋Δ
    • γϑτදͷ੾Γସ͑ʹ

    ͕͔͔͍࣌ؒͬͯΔ໰୊͕͋ͬͨ
    AirSHIFT ͱ͸

    View full-size slide

  21. BFF
    Client API
    Isomorphic
    Session Data
    Notification

    Server
    Redis
    FCM wrapper
    React/Redux
    Fetchr
    CSR SSR
    DB
    Push

    Notification
    WebSocket
    OAuth
    γϑτ

    Ϙʔυ

    ʢ࿈ܞΞϓϦʣ
    ΞʔΩςΫνϟ

    View full-size slide

  22. ࠓ೔͸AirSHIFT Ͱߦͬͨ
    ύϑΥʔϚϯεվળΛ
    ঺հ͠·͢

    View full-size slide

  23. ͔͜͜Β͕ຊ୊Ͱ
    ࣮ࡍʹ͋ͬͨ࿩Ͱ͢

    View full-size slide

  24. ͋Δ೔
    "JS4)*'5ར༻͍ͯ͠ΔͷͰ͕͢
    Ξοϓσʔτ͕͔͋ͬͯΒ
    ͘͢͝ॏ͍ΜͰ͢ΑͶʜ
    Ͳ͏ʹ͔ͯ͠

    ૣ͘ͳΒͳ͍Ͱ͠ΐ͏͔ʁ
    ͳΔ΄Ͳʜ
    ࣗ෼ͷύιίϯ͕ѱ͍ͷͰ͠ΐ͏͔ʁ

    View full-size slide

  25. ͸͍
    ͋Γ͕ͱ͏͍͟͝·͢ʙ
    ճઢ͕ऑ͍ͷ͔ͳʜ
    "1*͕ॏ͍ͷ͔ʜ
    ͪΐͬͱ͓࢕͍ͯ͠
    ௐࠪͯ͠΋ΑΖ͍͠Ͱ͠ΐ͏͔ʁ
    εςʔδϯάαʔόʔͷ
    ΋ͷ͸ͦΜͳʹ஗͘ͳ͍ͳʜ

    View full-size slide

  26. ௐࠪ͢Δͱ
    ϘτϧωοΫͷ΄ͱΜͲ͕4DSJQUJOH ˋ

    4DSJQUJOH͸KBWBTDSJQUͷ࣮ߦʹ֘౰

    View full-size slide

  27. ࠷ॳͷࢪࡦ
    • શ෦·ͱΊͯίϯϙʔωϯτͷ

    ࠶ϨϯμϦϯάΛݮΒͦ͏ͱͨ͠
    • εΫϦϓτͷ࣮ߦ͕஗͍͔ΒϘτϧωοΫ͸

    redux·ΘΓʹܾ·͍ͬͯΔͩΖ͏
    ͜͜ͰͳΜͱ͔͢Ε͹࠶ϨϯμϦϯάΛ

    ݮΒͤΔͷͰ͸ʁ

    View full-size slide

  28. Redux ΞʔΩςΫνϟ
    View
    "DUJPOT
    .JEEMFXBSF
    Reducer
    4UBUF
    Store
    DPOOFDU

    View full-size slide

  29. Redux ΞʔΩςΫνϟ
    View
    "DUJPOT
    .JEEMFXBSF
    Reducer
    4UBUF
    Store
    DPOOFDU

    View full-size slide

  30. connect
    3PPU $PNQPOFOU"
    DPOOFDU $PNQPOFOU"

    View full-size slide

  31. connect
    3PPU $PNQPOFOU"
    DPOOFDU $PNQPOFOU"

    ͕͜͜ࢠʹ఻ୡ͍ͯ͠Δ͔Β

    ࠶ϨϯμϦϯά͕ൃੜͯ͠ΔͷͰ͸

    View full-size slide

  32. connect
    3PPU $PNQPOFOU"
    DPOOFDU $PNQPOFOU"

    ͕͜͜ࢠʹ఻ୡ͍ͯ͠Δ͔Β

    ࠶ϨϯμϦϯά͕ൃੜͯ͠ΔͷͰ͸
    3FEVDFS͕

    \

    TUBUF 

    BOZ0CKFDU 

    ^

    ͯ͠Δ

    View full-size slide

  33. connect
    3PPU $PNQPOFOU"
    DPOOFDU $PNQPOFOU"

    3FEVDFS͕

    \

    TUBUF 

    BOZ0CKFDU 

    ^

    ͯ͠Δ
    ͜ͷઌ͔ΒมߋΛ఻ୡ
    ͠ͳ͍Α͏ʹ͢Ε͹͍͍ͷͰ͸ʂ
    ͕͜͜ࢠʹ఻ୡ͍ͯ͠Δ͔Β

    ࠶ϨϯμϦϯά͕ൃੜͯ͠ΔͷͰ͸

    View full-size slide

  34. ਪଌ͢Δͳ
    ܭଌͤΑ

    View full-size slide

  35. ਪଌ͢Δͳ
    (ਅҼΛಛఆ͢Δ·Ͱ)
    ܭଌͤΑ

    View full-size slide

  36. ഊҼ
    • ௐ͕ࠪ؁͍
    • ਅҼΛಛఆ͢Δ·Ͱͷܭଌ͕

    Ͱ͖͍ͯͳ͔ͬͨ
    • Connect શ෦ࠩ͠ସ͑ͨͷ͕μϝͩͬͨ

    O(N^2) ͳͷͰൺֱࣗମ͕ॏ͍

    View full-size slide

  37. ͲΜͳௐࠪΛ͢Δ͔
    • Scripting ͷ಺༁ΛݟΔ
    • ؔ਺ͷίʔϧελοΫΛపఈతʹௐ΂Δ
    • React಺෦ͰԿ͕ى͍ͬͯ͜Δ͔Λௐ΂Δ
    ϘτϧωοΫͷਅҼΛݟ͚ͭΔ·Ͱ۷Γ͛͞Δ

    View full-size slide

  38. Dev Tools Λ
    పఈతʹ࢖͍౗͢

    View full-size slide

  39. Performance Profiler

    View full-size slide

  40. React Dev Tools
    (Highlight Update)

    View full-size slide

  41. React Dev Tools
    (Profiler)

    View full-size slide

  42. Network Timing

    View full-size slide

  43. What is the User Timing API ?

    View full-size slide

  44. User Timing API ͱ͸
    • ύϑΥʔϚϯεΛܭଌ͢ΔͨΊͷ API
    • ͋Δ఺͔Β͋Δ఺·Ͱͷॲཧ͕࣌ؒݟΕΔ
    • Node ʹ΋͋Δ

    > require(‘perf_hooks’).performance

    View full-size slide

  45. performance.mark(‘A’)
    doSomeThing()
    performance.mark(‘B’)
    preformance.measure(‘A-B’, ‘A’, ‘B’)
    ࢖͍ํ
    • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹
    • ܭଌ͍ͨ͠લޙͰ mark()
    • measure(, , ) Ͱܭଌ

    View full-size slide

  46. performance.mark(‘A’)
    doSomeThing()
    performance.mark(‘B’)
    preformance.measure(‘A-B’, ‘A’, ‘B’)
    ࢖͍ํ
    • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹
    • ܭଌ͍ͨ͠લޙͰ mark()
    • measure(, , ) Ͱܭଌ

    View full-size slide

  47. performance.mark(‘A’)
    doSomeThing()
    performance.mark(‘B’)
    preformance.measure(‘A-B’, ‘A’, ‘B’)
    ࢖͍ํ
    • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹
    • ܭଌ͍ͨ͠લޙͰ mark()
    • measure(, , ) Ͱܭଌ

    View full-size slide

  48. performance.mark(‘A’)
    doSomeThing()
    performance.mark(‘B’)
    preformance.mesure(‘A-B’, ‘A’, ‘B’)
    ࢖͍ํ
    • doSomeThing ͷ࣮ߦ࣌ؒΛܭଌ͍ͨ͠৔߹
    • ܭଌ͍ͨ͠લޙͰ mark()
    • measure(, , ) Ͱܭଌ
    ͜ͷίʔυΛ௥هͯ͠
    %FW5PPMTͰ
    ύϑΥʔϚϯεΛܭଌ͢Δ

    View full-size slide

  49. React 16 ͔Β User Timing API͕ఏڙ
    • React 16 ͔ΒUser Timing API ͕ར༻͞Εͨ
    • ։ൃ؀ڥͰ͸ DevTools ͰݟΔ͚ͩͰ OK
    • React ͕ ΠΠΧϯδʹ

    `performance.mark, measure` ͯ͘͠Ε͍ͯΔ

    View full-size slide

  50. ศརͰ͸͋Δ͕
    “ਅҼ” Λಥ͖٧ΊΔʹ͸
    গ͠՝୊͕͋ͬͨ

    View full-size slide

  51. ՝୊
    • Ϣʔβʔͷૢ࡞ ͱ Component ͷ

    ϨϯμϦϯάͷؔ܎ੑ͕Θ͔Βͳ͍
    • Կ͕͖͔͚ͬʹ

    ࠶ϨϯμϦϯά͞Ε͍ͯΔ͔͕Θ͔Βͳ͍
    Ͳͷૢ࡞͕ॏ͍ͷ͔͔ͬ͠Γ੾Γ෼͚͍ͨ

    View full-size slide

  52. redux-action-timing-middleware

    View full-size slide

  53. maxmellon/redux-action-timing-middleware

    View full-size slide

  54. Ͱ͖Δ͜ͱ
    • ΞΫγϣϯͱComponentͷϨϯμϦϯάͷ

    ؔ܎͕ௐ΂ΕΔ
    • ྫ͑͹ LOCATION/CHANGE ͳͲͰ

    શؔ͘܎ແ͍ίϯϙʔωϯτ͕Ξοϓσʔτ

    ͞Ε͍ͯΔ͜ͱ͕Θ͔Δ

    View full-size slide

  55. redux-action-timing-middleware ͕஫ೖͨ͠

    UserTiming ͸ ֆจࣈQSFpY

    View full-size slide

  56. γϑτදͷ σʔλͷऔಘ੒ޭ ͱ͍͏ΞΫγϣϯͰ

    ൃੜͨ͠࠶ϨϯμϦϯά

    View full-size slide

  57. ϩʔσΟϯάΠϯδέʔλʔ࡟আʹΑͬͯ

    ൃੜͨ͠࠶ϨϯμϦϯά

    View full-size slide

  58. • Redux ͷΞΫγϣϯ͸

    Ϣʔβʔͷૢ࡞ͱඥ෇͍͍ͯΔ

    ex. handleClick

    ex. handleInput
    • Α͔ͬͨΒελʔ͍ͩ͘͞ʂʂʂʂ
    Ͳͷૢ࡞ͰԿ͕ϨϯμϦϯά͞Ε͔͕ͨΘ͔Δ
    ಋೖޙ

    View full-size slide

  59. վળͷΞϓϩʔν͸
    େ͖̎ͭ͘

    View full-size slide

  60. ॲཧ࣌ؒΛ΁Β͢

    View full-size slide

  61. ॲཧ࣌ؒΛ΁Β͢

    View full-size slide

  62. খ͘͢͞Δ
    ॲཧ࣌ؒΛ΁Β͢

    View full-size slide

  63. ॲཧ࣌ؒΛݮΒ͢
    • ؔ਺ͷॲཧ࣌ؒΛ୹͘͢Δ
    • ແବͳ࠶ܭࢉΛϝϞԽ͢Δ

    ϥΠϒϥϦͩͱ reselect, memoize ͳͲ….
    • ແବͳϧʔϓΛ஍ಓʹ௵͢

    View full-size slide

  64. ແବͳॲཧΛ͠ͳ͍

    View full-size slide

  65. ແବͳॲཧΛ͠ͳ͍

    View full-size slide

  66. ແବͳॲཧΛ͠ͳ͍

    View full-size slide

  67. • ݺͿඞཁͷͳ͍ؔ਺Λݺ͹ͳ͍Α͏ʹ͢Δ
    • React/Redux ʹ͓͍ͯ͸ 

    reducer Ͱແବʹ৽͍͠stateΛฦ͞ͳ͍
    • ઃܭϨϕϧͷݟ௚͕͠ඞཁͳέʔε͕ଟ͍
    ແବͳॲཧΛ͠ͳ͍

    View full-size slide

  68. ͜ΕΒΛ౿·͑ͯ
    ௐࠪ

    View full-size slide

  69. ͍͔ͭ͘ؾʹͳΔ఺͕
    ݟ͔͕ͭͬͨ
    ͦͷதͰ΋ҟ࣭ͳ΋ͷ͕͋ͬͨ

    View full-size slide

  70. ո͍͠Օॴ
    ΍ͨΒಉ͡ϒϩοΫ͕େྔʹ͋Δ…

    View full-size slide

  71. ո͍͠Օॴ
    ͜Ε΋

    View full-size slide

  72. ͜Ε΋
    ո͍͠Օॴ

    View full-size slide

  73. ͜Ε΋
    ո͍͠Օॴ

    View full-size slide

  74. ໌Β͔ʹͳΔϘτϧωοΫ
    ͥʔΜͿ
    Reconciliation

    View full-size slide

  75. ͜Ε΋
    ո͍͠Օॴ

    View full-size slide

  76. ͦ΋ͦ΋
    Reconciliationͬͯʁ

    View full-size slide

  77. Reconciliation ͱ͸
    • Ծ૝DOMϨϕϧͰಉ͔͡Ͳ͏͔Λൺֱͯ͠

    ࣮DOMʹcommit͢Δ͔Ͳ͏͔Λ൑ఆ
    • ͨͱ͑ SCU ͕ true ͩͱͯ͠΋

    Ծ૝DOMϨϕϧͰ౳͍͠৔߹

    commit ͞Εͳ͍

    View full-size slide

  78. Tree Reconciliation
    TFU4UBUF

    View full-size slide

  79. Tree Reconciliation
    4$6USVF
    TFU4UBUF

    4$6TIPVME$PNQPOFOU6QEBUF
    /P/FFE3FDPODJMJBUJPO
    /FFE3FDPODJMJBUJPO

    View full-size slide

  80. Tree Reconciliation
    4$6USVF
    OFX1SPQTˠ
    OFX1SPQTˠ
    4$6GBMTF
    4$6USVF
    TFU4UBUF

    SFOEFS

    4$6TIPVME$PNQPOFOU6QEBUF
    /P/FFE3FDPODJMJBUJPO
    /FFE3FDPODJMJBUJPO

    View full-size slide

  81. Tree Reconciliation
    4$6USVF
    OFX1SPQTˠ
    OFX1SPQTˠ
    4$6GBMTF
    4$6USVF
    TFU4UBUF

    OFX1SPQTˠ
    OFX1SPQTˠ
    SFOEFS
    SFOEFS

    4$6USVF
    4$6GBMTF
    ྘ͷՕॴ͸

    3FDPODJMJBUJPO͕

    ൃੜ͢Δ
    /P/FFE3FDPODJMJBUJPO
    /FFE3FDPODJMJBUJPO
    4$6TIPVME$PNQPOFOU6QEBUF

    View full-size slide

  82. Tree Reconciliation
    /P/FFE3FDPODJMJBUJPO
    /FFE3FDPODJMJBUJPO

    View full-size slide

  83. Tree Reconciliation
    4$6USVF
    OFX1SPQTˠ
    OFX1SPQTˠ
    4$6GBMTF
    4$6USVF
    TFU4UBUF

    OFX1SPQTˠ
    OFX1SPQTˠ
    SFOEFS
    SFOEFS

    4$6USVF
    4$6GBMTF
    ྘ͷՕॴ͸

    3FDPODJMJBUJPO͕

    ൃੜ͢Δ
    /P/FFE3FDPODJMJBUJPO
    /FFE3FDPODJMJBUJPO
    4$6TIPVME$PNQPOFOU6QEBUF

    View full-size slide

  84. ͦ΋ͦ΋
    shouldComponentUpdate
    ͱ͸ʁ

    View full-size slide

  85. React ʹ ͓͚Δ LifeCycle
    • ͦ΋ͦ΋ React ʹ͸ϥΠϑαΠΫϧ͕͋Δ
    • shouldComponentUpdate ͱ͍͏ͷ͸

    ϥΠϑαΠΫϧͷ1ͭ
    • ੹຿͸ɺࠩ෼ϨϯμϦϯά͕ඞཁ͔Ͳ͏͔ͷ

    ൑ఆΛߦ͏͜ͱ

    View full-size slide

  86. LifeCycle // version 16
    DPOTUSVDUPS
    SFOEFS
    DPNQPOFOU%JE.PVOU DPNQPOFOU%JE6QEBUF
    DPNQPOFOU8JMM

    6ONPVOU
    6QEBUF3FBDU%0.BOESFGT
    Mount
    TIPVME$PNQPOFOU6QEBUF
    Update Unmount
    3FOEFS

    1IBTF
    $PNNJU

    1IBTF
    HFU%SJWFE4UBUF'SPN1SPQT
    HFU4OBQTIPU#FGPSF6QEBUF

    View full-size slide

  87. LifeCycle // version 16
    DPOTUSVDUPS
    SFOEFS
    DPNQPOFOU%JE.PVOU DPNQPOFOU%JE6QEBUF
    DPNQPOFOU8JMM

    6ONPVOU
    6QEBUF3FBDU%0.BOESFGT
    Mount
    TIPVME$PNQPOFOU6QEBUF
    Update Unmount
    3FOEFS

    1IBTF
    $PNNJU

    1IBTF
    ͍͕ͭ͜USVFΛ

    ฦͨ͠ͱ͖ͷΈ

    ࠶ϨϯμϦϯά
    HFU%SJWFE4UBUF'SPN1SPQT
    HFU4OBQTIPU#FGPSF6QEBUF

    View full-size slide

  88. LifeCycle // version 16
    DPOTUSVDUPS
    SFOEFS
    DPNQPOFOU%JE.PVOU DPNQPOFOU%JE6QEBUF
    DPNQPOFOU8JMM

    6ONPVOU
    6QEBUF3FBDU%0.BOESFGT
    Mount
    TIPVME$PNQPOFOU6QEBUF
    Update Unmount
    3FOEFS

    1IBTF
    $PNNJU

    1IBTF
    ͍͕ͭ͜USVFΛ

    ฦͨ͠ͱ͖ͷΈ

    ࠶ϨϯμϦϯά
    HFU%SJWFE4UBUF'SPN1SPQT
    HFU4OBQTIPU#FGPSF6QEBUF
    σϑΥϧτ͸

    ৗʹ5SVFΛฦ٫

    View full-size slide

  89. ࣮ࡍʹݟͯΈΔ

    View full-size slide

  90. Ͳ͏ݮΒ͔͢

    View full-size slide

  91. Tree Reconciliation
    4$6USVF
    OFX1SPQTˠ
    OFX1SPQTˠ
    4$6GBMTF
    4$6USVF
    TFU4UBUF

    OFX1SPQTˠ
    OFX1SPQTˠ
    SFOEFS
    SFOEFS

    4$6USVF
    4$6GBMTF
    ͦ΋ͦ΋໦ߏ଄
    খ͘͢͞Ε͹͍͍͡ΌΜ

    View full-size slide

  92. Reconciliation Λ΁Β͢
    ̎ͭͷΞϓϩʔν
    • ໦ߏ଄Λখ͘͢͞Δ

    㱺 ७ਮʹ໦ߏ଄Λ୳ࡧ͢Δྔ͕ݮΔ


    View full-size slide

  93. Tree Reconciliation
    /P/FFE3FDPODJMJBUJPO
    /FFE3FDPODJMJBUJPO

    View full-size slide

  94. shouldComponentUpdate Ͱ
    Reconciliation ΛݮΒͤΔ

    View full-size slide

  95. Reconciliation Λ΁Β͢
    ̎ͭͷΞϓϩʔν
    • ໦ߏ଄Λখ͘͢͞Δ

    㱺 ७ਮʹ໦ߏ଄Λ୳ࡧ͢Δྔ͕ݮΔ
    • ෆཁͳReconciliation Λ͠ͳ͍

    shouldComponentUpdate Λ ॻ͘

    㱺 falseΛฦͨ͠ͱ͔͜Βࢠ͸ݟͳ͘ͳΔ

    View full-size slide

  96. ۩ମతʹ
    ໦ߏ଄Λখ͘͢͞Δͱ͸
    Ͳ͏͍͏͜ͱ͔

    View full-size slide

  97. ϒϥ΢βͷ

    ΢Οϯυ΢αΠζ

    View full-size slide

  98. ඳը͞Ε͍ͯΔDOMͷαΠζ
    ϒϥ΢βͷ

    ΢Οϯυ΢αΠζ

    View full-size slide

  99. ݟ͑ͯͳ͍෦෼ͷDOMΛඳը͢Δඞཁͳ͍!!!
    ͜ͷ෦෼͔͠

    ݟ͑ͳ͍

    View full-size slide

  100. ͜ΕΛ࣮ݱ͢Δͷ͕

    View full-size slide

  101. React-Virtualized

    View full-size slide

  102. React-Virtualizedͱ͸
    • ڊେͳϦετ΍දΛ

    ޮ཰Α͘ඳը͢ΔͨΊͷϥΠϒϥϦ
    • ແݶεΫϩʔϧͱ͔Ծ૝εΫϩʔϧ͕Ͱ͖Δ
    • ࣮ࡍʹ΍͍ͬͯΔ͜ͱ͸ඳըൣғ֎Unmount

    εΫϩʔϧํ޲Λݟͯ௚લͰMount

    View full-size slide

  103. લޙͦΕͧΕόοϑΝ͕ඞཁ
    ͳͥͳΒεΫϩʔϧ࣌ʹਅͬനʹͳΔ

    View full-size slide

  104. ໦ߏ଄͸খ͘͞Ͱ͖ͨ

    View full-size slide

  105. ·ͩ ෆཁͳ
    Reconciliation ͕͋Δ

    View full-size slide

  106. ෆཁͳ
    Reconciliation Λ͠ͳ͍

    View full-size slide

  107. ͦ΋ͦ΋
    γϑτද෦෼ͷίʔυΛ
    ΈͯΈΔͱ

    View full-size slide

  108. 3ͭͷͰ͔͍ίϯϙʔωϯτ͔Βߏ੒͞Ε͍ͯͨ

    View full-size slide

  109. ͨͱ͑͹ ੺࿮ͷՕॴ͚ͩ
    ࠶ϨϯμϦϯά͍ͨ͠ͱ͢Δ

    View full-size slide

  110. shouldComponentUpdate ʹΑΔ൑ఆ͸

    ίϯϙʔωϯτͷ୯ҐͰ͔͠Ͱ͖ͳ͍

    View full-size slide

  111. shouldComponentUpdate ʹΑΔ൑ఆ͸

    ίϯϙʔωϯτͷ୯ҐͰ͔͠Ͱ͖ͳ͍
    Ұ෦෼Λߋ৽͢ΔͨΊʹ

    શ෦Λߋ৽͢Δ͔͠ແ͍

    View full-size slide

  112. ໌Β͔ʹͳΔϘτϧωοΫ
    ࠩ෼ϨϯμϦϯάͷ
    ࢫຯ͕…

    View full-size slide

  113. ίϯϙʔωϯτΛখ۠͘͞੾Δ

    View full-size slide

  114. ͜ͷΞϓϩʔνͷྑ͍ͱ͜Ζ

    View full-size slide

  115. ͜ͷΞϓϩʔνͷڧΈ
    • ٕज़తʹ೉͍͠ཁૉ͕͘͢ͳ͍

    ˠ ΊΜͲ͍͚ͩ͘͞
    • shouldComponentUpdate ͸࠷ॳ͔Β

    ॻ͔ͳͯ͘΋ྑ͍

    → ॏ͘ͳΕ͹ॻ͚͹͍͍
    • ίϯϙʔωϯτ͕খ͍͞ͱ props ͕গͳ͍

    → SCU Λॻ͔ͳͯ͘΋ React.memo ͳͲ͕࢖͑Δ

    View full-size slide

  116. Fat ͳ
    Component ͸
    ઈରμϝ

    View full-size slide

  117. ผΕ͍ͯΔ͚ͩͰ
    ྑ͍఺͕ͨ͘͞Μ͋Δ͠
    ࢪࡦ΋ଧͪ΍͍͢

    View full-size slide

  118. Before / After

    View full-size slide

  119. Before
    After
    4ഒ௿଎؀ڥͰ 374% վળɺ10ඵ΄ͲεϐʔυΞοϓ

    View full-size slide

  120. վળޙ
    γϑτදૣ͘ͳΓ·ͨ͠Ͷʂ
    ͋Γ͕ͱ͏͍͟͝·͢ʂ
    Αͬ͠Ό

    View full-size slide

  121. ͱ͸͍͑
    • 3.6sec ͸଎͍ͱ͸ݴ͑ͳ͍
    • ΍Γ࢒ͨ͠վળ΋͋Δ
    • Reducer Λ͖ͪΜͱ

    ઃܭ͠ͳ͓ͤ͹

    ແବͳߋ৽͕఻ୡ͞Εͳ͍

    View full-size slide

  122. ਪଌ͢Δͳ
    ܭଌͤΑ

    View full-size slide

  123. ਪଌ͢ΔͳܭଌͤΑ
    • ͱΓ͋͑ͣͷܭଌ͸ݪҼͷ૚෼͚ʹա͗ͳ͍
    • צͰࢼͯ͠΋͏·͍͔͘ͳ͍
    • େࣄͳͷ͸ਅҼΛݟ͚ͭΔ·Ͱܭଌ͢Δ͜ͱ
    • Chrome Dev Tools / React Dev Tools

    ͕ܭଌ͢Δ্Ͱศར

    View full-size slide

  124. ͦ΋ͦ΋ͳͥ
    ώΞϦϯά·Ͱ
    ൃ֮͠ͳ͔͔ͬͨ

    View full-size slide

  125. ސ٬ͷPC͸
    CPUͷॲཧೳྗ͕௿͔ͬͨ
    ։ൃ؀ڥͰ͸໰୊ͳ͔ͬͨ

    View full-size slide

  126. ސ٬ͷ؀ڥͰ

    ύϑΥʔϚϯε͸

    ܭଌ͠ͳ͚Ε͹ͳΒͳ͍

    View full-size slide

  127. ސ٬ͱಉ౳ͷ؀ڥͰ
    ύϑΥʔϚϯεΛௐ΂Δ
    • Fast 3G ճઢͰಈ͔͢
    • x4 εϩοτϧ؀ڥͰಈ͔͢

    View full-size slide

  128. ̍࣍։ൃ࣌఺Ͱ͸
    ௿଎ঢ়ଶͰͷ
    ύϑΥʔϚϯε֬ೝ΋
    ͍ͯͨ͠

    View full-size slide

  129. ͦΕͰ΋ൃݟ͕஗Εͨͷ͸
    ఆظతͳύϑΥʔϚϯεଌఆΛ
    ߦ͍ͬͯͳ͔͔ͬͨΒ

    View full-size slide

  130. ఆظతͳύϑΥʔϚϯεଌఆͷॏཁੑ
    • ύϑΥʔϚϯε͸ػೳ௥Ճͱͱ΋ʹ

    ͲΜͲΜྼԽ͍ͯ͘͠
    • ύϑΥʔϚϯεΛܧଓతɼఆظతʹݟ͍͖ͯ

    ಈ޲Λৗʹܭଌ͓ͯ͘͜͠ͱ͕େࣄ
    ͜Ε͕ͦ͜श׳ԽͰ͋Γɺ
    ύϑΥʔϚϯεଌఆΛߦ͏จԽͰ͋Δ

    View full-size slide

  131. ࠓޙͷ՝୊

    View full-size slide

  132. ύϑΥʔϚϯε͸

    վળͯ͠ऴΘΓͰ͸ͳ͍
    ։ൃνʔϜʹश׳Խ

    ͤ͞Δ͜ͱ͕େ੾

    View full-size slide

  133. ࠓޙͷ՝୊
    • ͜ͷվળʹͱͲ·ΒͣνʔϜશମʹ

    ύϑΥʔϚϯεΛ؍ଌ͢ΔจԽΛࠜ෇͚Δ
    • ແବͳॲཧΛߦΘͳ͍վળʹνϟϨϯδ

    㱺 reducer ͷઃܭΛશ໘తʹݟ௚ͯ͠

    ແବͳ఻ୡΛͳ͘͢
    • ઌಡΈʹΑΔσʔλͷઌߦऔಘʹνϟϨϯδ

    View full-size slide

  134. ָʹ
    shouldComponbentUpdate Λ
    ࣮૷͍ͨ͠

    View full-size slide

  135. ָʹSCUΛ
    ࣮૷͢ΔͨΊͷϥΠϒϥϦ
    • PureComponent
    • recompose/pure
    • React.memo
    • ͳͲ…

    View full-size slide

  136. ԿΛͯ͘͠ΕΔ͔

    View full-size slide

  137. ԿΛͯ͘͠ΕΔ͔
    • جຊతʹ͢΂ͯ fbjs/shallowEqual ͯ͘͠ΕΔ
    • React.memo ͸ $$type Λॻ͖׵͑ͯ

    ಺෦ͷ updater ͷϩδοΫΛࠩ͠ସ͑ͯΔ

    㱺 SCU ʹ shallowEqual ͕ೖΔͱࢥͬͯྑ͍

    View full-size slide

  138. ͰɺͲΕ͕ྑ͍ͷʁ

    View full-size slide

  139. ܭଌͯ͠Έͨ

    View full-size slide

  140. ԣ࣠͸ prev === next ͷ֬཰
    ॎ࣠͸ ࣌ؒ (ms)

    View full-size slide

  141. ·ͱΊ
    • recompose/pure ͸ class Ͱ΋ ؔ਺ Ͱ΋

    ࢖͑Δ
    • React.memo ͸ؔ਺༻
    • PureComponent ͸ Ϋϥε༻
    • React.memo ͸ ΦϓγϣϯͰνϡʔχϯάͰ͖Δ

    View full-size slide

  142. connect ୈ̐Ҿ਺

    View full-size slide

  143. connect() // version5
    connect(
    [mapStateToProps],
    [mapDispatchToProps],
    [mergeProps],
    [options]
    ): (React.Component<*>) => Recat.Component<*>
    ࣮͸4ͭ໨ͷҾ਺͕͋Δ

    View full-size slide

  144. Options
    {
    pure = ture,
    areStatesEqual = (a, b) => a === b,
    areOwnPropsEqual = shallowEqual,
    areStatePropsEqual = shallowEqual,
    areMergedPropsEqual = shallowEqual,
    storeKey = ‘store’,
    }
    HoC ࣗମͷ࠶ϨϯμϦϯάͷ੍ޚ͕Ͱ͖Δ

    View full-size slide

  145. connect() // version5
    Component
    Store
    connect
    areStateEqual(prev, next)
    next = mapStateToProps(prev, next)
    prev = next // memoized once
    Update Childe Component
    // return true 

    in shouldComponentUpdate of HoC

    View full-size slide

  146. connect() // version5
    Component
    Store
    connect
    areStateEqual(prev, next)
    next = mapStateToProps(prev, next)
    prev = next // memoized once
    7FSTJPO͸)P$ϕʔε
    Update Childe Component
    // return true 

    in shouldComponentUpdate of HoC

    View full-size slide

  147. connect() // version5
    connect
    areStateEqual(prev, next)
    next = mapStateToProps(prev, next)
    prev = next // memoized once
    PQUJPOQVSF
    4IBMMPX&RVBM
    4USJDU&RVBM
    Update Childe Component
    // return true 

    in shouldComponentUpdate of HoC
    Store
    Component

    View full-size slide

  148. connect() // version5
    connect
    areStateEqual(prev, next)
    next = mapStateToProps(prev, next)
    prev = next // memoized once
    ୈ̐Ҿ਺ͰΦʔόϥΠυͰ͖Δ
    QSFW4UBUF OFYU4UBUF
    CPPMFBO
    Update Childe Component
    // return true 

    in shouldComponentUpdate of HoC
    Store
    Component

    View full-size slide

  149. connect() // version5
    connect
    areStateEqual(prev, next)
    next = mapStateToProps(prev, next)
    prev = next // memoized once
    Update Childe Component
    // return true 

    in shouldComponentUpdate of HoC
    Store
    Component
    લճͷ݁ՌΛอ͓࣋ͯ͘͠

    View full-size slide

  150. connect ·ͱΊ
    • HoCͰ࣮૷͞Ε͍ͯΔ
    • Connect ͷ areStateEqual ͕ false Λฦͤ͹

    ࢠίϯϙʔωϯτͷ࠶ϨϯμϦϯάͳ͠
    • ୈ4Ҿ਺ͰΦϓγϣϯΛ஫ೖՄೳ

    View full-size slide