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 full-size slide

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

    View full-size 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 full-size slide

  4. Let me introduce one
    My favorite food

    View full-size slide

  5. Let’s talk about main subject

    View full-size slide

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

    View full-size slide

  7. What is the “AirSHIFT” ?

    View full-size slide

  8. "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 full-size slide

  9. So rich UI as Desktop Application

    View full-size slide

  10. Architecture

    View full-size slide

  11. 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 full-size slide

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

    View full-size slide

  13. ̎ͭͷΞϓϩʔνͰվળ
    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 full-size slide

  14. 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 full-size slide

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

    View full-size slide

  16. ͔͠͠…
    but…

    View full-size slide

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

    View full-size slide

  18. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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


    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  33. ͦͷ݁Ռ
    Results

    View full-size slide

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

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


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

    View full-size slide

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



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

    View full-size slide

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





    25% of users take longer than 3 sec

    View full-size slide



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

    View full-size slide



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

    View full-size slide



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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    click

    View full-size slide

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

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

    View full-size slide

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

    click
    CSR

    View full-size slide

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

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

    View full-size slide

  50. BFF
    Client API
    Learning
    Server
    .PEFM

    click
    CSR Request Request
    Request
    Response
    Response
    Response

    View full-size slide

  51. WebWorker
    ×
    Suspence

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. Comlink

    Suspense

    View full-size slide

  55. Lazy Rendering

    View full-size slide

  56. ༏ઌ౓͕ߴ͍
    High priority

    View full-size slide

  57. ༏ઌ౓͕௿͍
    Low priority

    View full-size slide

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

    View full-size slide






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

    View full-size slide

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

    View full-size slide

  61. ͋Γ͕ͱ͏
    Thank you

    View full-size slide