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

React Performance Tuning

React Performance Tuning

React Meet up with zeit @2019.04.19

Kento TSUJI

April 19, 2019
Tweet

More Decks by Kento TSUJI

Other Decks in Technology

Transcript

  1. React Performance
    Tuning
    Kento TSUJI @maxmellon
    Recruit Technologies Co., Ltd.
    React Meet up with zeit / 2019.04.19

    View Slide

  2. Welcome to Japan!!!!!
    At asakusa © 2019 The Hotelier Group Akasaka K.K.
    https://anaintercontinental-tokyo.jp/location/asakusa/

    View Slide

  3. Profile
    • Github: @maxmellon
    • Twitter: @maxmellon_9039
    • Start working second year at the recruit-tech
    • Yosuke Furukawa’s subordinate
    *BN/FXCJF
    'SPOUFOE&OHJOFFS


    View Slide

  4. Let me introduce one
    My favorite food

    View Slide

  5. Udon
    ͏ͲΜ

    View Slide

  6. :VVVVN


    View Slide

  7. Let’s talk about main subject

    View Slide

  8. What am I doing in R-tech
    • Develop “AirSHIFT”
    • Develop new features
    • Improve performance
    • Performance Hackson in frontend
    • In other products than AirSHIFT

    View Slide

  9. What is the “AirSHIFT” ?

    View Slide

  10. "EKVTUNFOU
    4IJGUT
    AirSHIFT is web service for store managers
    of part time staffs
    ※ “Store Manager” manages all schedule 

    of part time job in Japanese
    $SFBUFXPSL
    4DIFEVMF
    -JTUVQTIJGUT
    $PMMFDUTIJGUT

    GSPNQBSUT
    3FNJOE
    1SJOUPVU
    3FRVFTU
    XPSL

    View Slide

  11. So rich UI as Desktop Application

    View Slide

  12. Architecture

    View Slide

  13. BFF
    (express)
    Client API
    Isomorphic
    Session Data
    Notification

    (socket.io)
    Redis
    FCM wrapper
    (React/Redux)
    Fetchr
    CSR SSR
    DB
    Push

    Notification
    WebSocket
    OAuth
    CellPhone
    Application
    For Part time worker

    View Slide

  14. ͜Ε·ͰͷύϑΥʔϚϯεվળ
    Performance improvements so far

    View Slide

  15. ̎ͭͷΞϓϩʔνͰվળ
    Improved performance with two approaches
    https://speakerdeck.com/maxmellon/reactzhi-spa-niokeru-pahuomansutiyuningu
    ࠶ϨϯμϦϯάͷ࠷దԽ
    0QUJNJ[BUJPOSFSFOEFSJOH
    େ͖ͳςʔϒϧͷ7JSUVBMJ[FEԽ
    7JSUVBMJ[FEMBSHFTDBMFUBCMFDPNQPOFOU
    Nodefest’ 18ɺHTML5 Conf Ͱ঺հ
    Introduced Nodefest’ 18 and HTML5 Conf

    View Slide

  16. https://speakerdeck.com/maxmellon/reactzhi-spa-niokeru-pahuomansutiyuningu
    ࠶ϨϯμϦϯάͷ࠷దԽ
    0QUJNJ[BUJPOSFSFOEFSJOH
    େ͖ͳςʔϒϧͷ7JSUVBMJ[FEԽ
    7JSUVBMJ[FEMBSHFTDBMFUBCMFDPNQPOFOU
    Nodefest’ 18ɺHTML5 Conf Ͱ঺հ
    Introduced Nodefest’ 18 and HTML5 Conf
    ৄࡉ͸͜ͷεϥΠυʹॻ͍ͯ͋Γ·͢
    Details are in these slides
    https://speakerdeck.com/maxmellon/reactzhi-spa-niokeru-pahuomansutiyuningu

    View Slide

  17. Before
    13,529ms
    After
    3,612ms
    CPU x4 slow
    Fast 3G
    Improvement
    վળ
    374%

    View Slide

  18. ͔͠͠…
    but…

    View Slide

  19. 13,529ms
    3,612ms
    3.6ඵͬͯ଎͍ͷʁ
    Is 3.6 second so fast?

    View Slide

  20. PGVTFSTXJMMMFBWFJGQBHFMPBEJOH
    UJNFJTMPOHFSUIBOTFDPOET
    News Lab Japanese AMP Office Hour: Introduction to AMP with Duncan Wright, Strategic Partner Manager ΑΓ
    https://www.youtube.com/watch?time_continue=150&v=3N6yDLP1WUIa

    View Slide

  21. ͞ΒͳΔվળ͕ඞཁ
    Further performance improvement is needed

    View Slide

  22. ࠓ೔͸͞ΒͳΔվળʹ͍ͭͯ঺հ͠·͢
    Today I’ll introduce further improvement

    View Slide

  23. ϘτϧωοΫͷௐࠪ
    Investigation of bottlenecks

    View Slide

  24. ௐࠪ৚݅
    Research condition
    • /sft/monthlyshift/201701 

    → /sft/monthlyshift/201702 ΁ͷભҠ
    • ը໘αΠζ 1440 x 900 (ϝΠϯλʔήοτ)
    transition
    Display size Main target


    View Slide

  25. View Slide

  26. ؔ਺ͷ࣮ߦ͚ͩͰ110ms
    110ms with function execution only
    ϘτϧωοΫ ͦͷ1
    Bottleneck 1

    View Slide

  27. Կͯ͠Δͷ͔ʁ
    What is actually happening?

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. େྔͷmomentͷΠϯελϯεΛੜ੒
    Create many instances of moment

    View Slide

  35. ϘτϧωοΫ ͦͷ2
    Bottleneck 2
    ͢΂ͯಉ͡ίϯϙʔωϯτ
    All same components
    ΞΫγϣϯ͕dispatch͞ΕΔͱ࠶ϨϯμϦϯά͕ى͖Δ
    Re-render happens with each action dispatch

    View Slide

  36. ͳͥ࠶ϨϯμϦϯά͕ൃੜʁ
    Why re-render?

    View Slide


  37. reselect͸ΈΜͳ஌ͬͯΔʁ
    Reselect ͕ ຖճҧ͏ Object Λฦ٫͍ͯͨ͠
    reselect was returning different object each time

    View Slide

  38. View Slide

  39. ଞʹ΋͍͔ͭ͘ϘτϧωοΫ͕͋ͬͨ
    There were more bottlenecks

    View Slide

  40. 1ͭ1ͭվળͯ͠Ϩϙʔτʹ·ͱΊͨ
    All of them were resolved and summarized in reports

    View Slide

  41. Moment Λେྔʹੜ੒͍ͯ͠Δ໰୊
    • ಉ͡΋ͷ࠶ੜ੒͍ͯͨ͠ͷͰͻͱ·ͣmemoize
    • ͢΂ͯUnixTimeʹΑΔܭࢉʹॻ͖௚͍ͨ͠

    ˠ ͨͩɼ͓ۚपΓ͸σάϨͬͨͱ͖ͷϦεΫ͕େ͖͘அ೦
    Hope to re-implementation by unix time.
    Memoized instance for a while
    Issue 1: many moment instances

    View Slide

  42. Reselect ͕ຖճҧ͏ObjectΛੜ੒͍ͯ͠Δ໰୊
    • Reselect ͷ੹຿ΛνʔϜ಺Ͱ࠶֬ೝ
    • ΞϯνύλʔϯΛ঺հͯ͠࠶ൃ๷ࢭ
    Issue 2: reselect returning different object each time
    Introduced how to use reselect and anti-patterns to team

    View Slide

  43. ͦͷ݁Ռ
    Results

    View Slide

  44. 50%ͷϢʔβʔ͸1.5ඵҎ಺ʹ

    Ӿཡ͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ


    ⚪ ⚪
    ⚪ ⚪ ⚪ ⚪ ⚪
    ⚪ ⚪ ⚪ ⚪ ⚪
    50% of users can load the page within 1.5sec

    View Slide

  45. 75%ͷϢʔβʔ͸3.0ඵҎ಺



    ⚪ ⚪
    ⚪ ⚪ ⚪ ⚪ ⚪
    75% of users can load within 3.0 sec

    View Slide

  46. ࢒Γ25%͸3ඵͰඳըग़དྷ͍ͯͳ͍





    25% of users take longer than 3 sec

    View Slide



  47. ͜ͷ಺40%͕཭୤ͷՄೳੑ
    ୯७ʹ౰ͯ͸ΊΔͱ
    40% of them might leave

    View Slide



  48. ࠓɼ͜ΕΛղܾ͢ΔͨΊͷࢪࡦΛݕ౼͍ͯ͠Δ
    We are examining to solve this

    View Slide



  49. ͜ΕΒͷϢʔβʔͷಛ௃
    • ଞͷϢʔβʔΑΓ΋CPUͷੑೳ͕௿͍ʢͱਪଌͰ͖Δʣ
    CPUΛ࢖Θͳ͍Ξϓϩʔν͕ඞཁ
    The characteristic of these users
    have lower CPU spec than other users
    Will need approach that DON'T use CPU

    View Slide

  50. Prefetch

    View Slide

  51. PrefetchʹΑΔϖʔδදࣔͷߴ଎Խ
    /monthly
    /daily
    44%
    10%
    ཌ೔ͷ
    ༧ఆ֬ೝ͠Α͏ʂ
    ࣍ͷߦಈΛ༧૝
    API΁ͷΞΫηεϩά͔Β܏޲Λਪଌ
    Research user action from access logs
    Rendering speed-up using Prefetch

    View Slide

  52. BFF
    Client API
    Request Request
    Learning
    Server
    .PEFM
    Request

    View Slide

  53. BFF
    Client API
    Request
    SSR
    Request
    Response
    Response
    Learning
    Server
    .PEFM
    Response
    Request
    ୯७Ϛϧίϑաఔ
    Markov process

    View Slide

  54. BFF
    Client API
    Request
    SSR
    Request
    Response
    Response
    Learning
    Server
    .PEFM
    Response
    Request
    ୯७Ϛϧίϑաఔ
    Markov process
    ࣍ʹऔಘ͢΂͖ϦιʔεΛϔομʹ஫ೖ
    #''JOKFDUTJOUPUIFIFBEFSSFTPVSDFTSFRVJSFEOFYU

    View Slide

  55. BFF
    Client API
    Learning
    Server
    .PEFM
    Parse Header
    Pre-fetch Request

    View Slide

  56. BFF
    Client API
    Learning
    Server
    .PEFM
    Request Request
    Response
    Response
    LRU-cache
    SET

    View Slide

  57. BFF
    Client API
    Learning
    Server
    .PEFM
    LRU-cache
    exist ?

    click

    View Slide

  58. BFF
    Client API
    Learning
    Server
    .PEFM
    LRU-cache
    exist ?

    click
    ߦಈ༧૝͕ ”͋ͨͬͨ” ࣌
    When the expectation was met

    View Slide

  59. BFF
    Client API
    Learning
    Server
    .PEFM
    LRU-cache
    GET

    click
    CSR

    View Slide

  60. BFF
    Client API
    Learning
    Server
    .PEFM
    LRU-cache
    exist ?

    click
    ߦಈ༧૝͕ ”֎Εͨ” ࣌
    When an expectation is missed

    View Slide

  61. BFF
    Client API
    Learning
    Server
    .PEFM

    click
    CSR Request Request
    Request
    Response
    Response
    Response

    View Slide

  62. WebWorker
    ×
    Suspence

    View Slide

  63. View Slide

  64. View Slide

  65. ͦͷ··૊Έ߹ΘͤΔͷ͸গ͠େม
    A bit difficult to combine these.

    View Slide

  66. View Slide

  67. worker.js

    View Slide

  68. Hello.js

    View Slide

  69. App.js

    View Slide

  70. https://git.io/fjOCk
    (maxmellon/react-with-comlink-sample)

    View Slide

  71. Comlink

    Suspense

    View Slide

  72. Lazy Rendering

    View Slide

  73. View Slide

  74. ༏ઌ౓͕ߴ͍
    High priority

    View Slide

  75. ༏ઌ౓͕௿͍
    Low priority

    View Slide

  76. ॏ͍ܭࢉ͕ඞཁ
    Required heavy calculation

    View Slide






  77. ͜ΕΒͷࢪࡦͰ͢΂ͯͷϢʔβʔ͕
    ετϨεແ͘ར༻Ͱ͖Δͷ͕ཧ૝
    I hope these measures will make all users stress-free to use AirSHIFT

    View Slide

  78. ΋͠ɼ঺հͨ͠ΞϓϩʔνҎ֎Ͱ
    ༗ޮͦ͏ͳ෺͕͋Ε͹ڭ͑ͯ΄͍͠
    Please tell me if you know other effective approaches

    View Slide

  79. ͋Γ͕ͱ͏
    Thank you

    View Slide

  80. View Slide