React Performance Tuning

React Meet up with zeit @2019.04.19

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