React Performance Tuning

Transcript

1. React Performance Tuning Kento TSUJI @maxmellon Recruit Technologies Co., Ltd.

   React Meet up with zeit / 2019.04.19

2. Welcome to Japan!!!!! At asakusa © 2019 The Hotelier Group

   Akasaka K.K. https://anaintercontinental-tokyo.jp/location/asakusa/

3. Profile • Github: @maxmellon • Twitter: @maxmellon_9039 • Start working

   second year at the recruit-tech • Yosuke Furukawa’s subordinate *
   BN
   /FXCJF
   
   'SPOUFOE
   &OHJOFFS
   
   ✨
   ✨

4. Let me introduce one My favorite food

5. Udon ͏ͲΜ

6. :VVVVN
   

7. Let’s talk about main subject

8. What am I doing in R-tech • Develop “AirSHIFT” •

   Develop new features • Improve performance • Performance Hackson in frontend • In other products than AirSHIFT

9. What is the “AirSHIFT” ?

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 $SFBUF
    XPSL
    4DIFEVMF -JTU
    VQ
    TIJGUT $PMMFDU
    TIJGUT
 GSPN
    QBSUT 3FNJOE 1SJOU
    PVU 3FRVFTU
    XPSL

11. So rich UI as Desktop Application

12. Architecture

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

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

15. ̎ͭͷΞϓϩʔνͰվળ Improved performance with two approaches https://speakerdeck.com/maxmellon/reactzhi-spa-niokeru-pahuomansutiyuningu ࠶ϨϯμϦϯάͷ࠷దԽ
    0QUJNJ[BUJPO
    SFSFOEFSJOH େ͖ͳςʔϒϧͷ7JSUVBMJ[FE
    Խ
    

    7JSUVBMJ[FE
    MBSHF
    TDBMF
    UBCMF
    DPNQPOFOU
    Nodefest’ 18ɺHTML5 Conf Ͱ঺հ Introduced Nodefest’ 18 and HTML5 Conf

16. https://speakerdeck.com/maxmellon/reactzhi-spa-niokeru-pahuomansutiyuningu ࠶ϨϯμϦϯάͷ࠷దԽ
    0QUJNJ[BUJPO
    SFSFOEFSJOH େ͖ͳςʔϒϧͷ7JSUVBMJ[FE
    Խ
    7JSUVBMJ[FE
    MBSHF
    TDBMF
    UBCMF
    DPNQPOFOU
    Nodefest’ 18ɺHTML5 Conf Ͱ঺հ Introduced

    Nodefest’ 18 and HTML5 Conf ৄࡉ͸͜ͷεϥΠυʹॻ͍ͯ͋Γ·͢ Details are in these slides https://speakerdeck.com/maxmellon/reactzhi-spa-niokeru-pahuomansutiyuningu

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

    վળ 374%

18. ͔͠͠… but…

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

20. 
    PG
    VTFST
    XJMM
    MFBWF
    JG
    QBHF
    MPBEJOH
    UJNF
    JT
    MPOHFS
    UIBO
    
    TFDPOET 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

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

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

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

24. ௐࠪ৚݅ Research condition • /sft/monthlyshift/201701 
 → /sft/monthlyshift/201702 ΁ͷભҠ •

    ը໘αΠζ 1440 x 900 (ϝΠϯλʔήοτ) transition Display size Main target
25. None

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

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

28. None
29. None
30. None
31. None
32. None
33. None

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

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

    happens with each action dispatch

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

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

    object each time
38. None

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

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

41. Moment Λେྔʹੜ੒͍ͯ͠Δ໰୊ • ಉ͡΋ͷ࠶ੜ੒͍ͯͨ͠ͷͰͻͱ·ͣmemoize • ͢΂ͯUnixTimeʹΑΔܭࢉʹॻ͖௚͍ͨ͠
 ˠ ͨͩɼ͓ۚपΓ͸σάϨͬͨͱ͖ͷϦεΫ͕େ͖͘அ೦ Hope to

    re-implementation by unix time. Memoized instance for a while Issue 1: many moment instances

42. Reselect ͕ຖճҧ͏ObjectΛੜ੒͍ͯ͠Δ໰୊ • Reselect ͷ੹຿ΛνʔϜ಺Ͱ࠶֬ೝ • ΞϯνύλʔϯΛ঺հͯ͠࠶ൃ๷ࢭ Issue 2: reselect

    returning different object each time Introduced how to use reselect and anti-patterns to team

43. ͦͷ݁Ռ Results

44. 50%ͷϢʔβʔ͸1.5ඵҎ಺ʹ
 Ӿཡ͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪

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

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

    users can load within 3.0 sec

46. ࢒Γ25%͸3ඵͰඳըग़དྷ͍ͯͳ͍ 25% of users take longer than 3 sec

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

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

49. ͜ΕΒͷϢʔβʔͷಛ௃ • ଞͷϢʔβʔΑΓ΋CPUͷੑೳ͕௿͍ʢͱਪଌͰ͖Δʣ CPUΛ࢖Θͳ͍Ξϓϩʔν͕ඞཁ The characteristic of these users have

    lower CPU spec than other users Will need approach that DON'T use CPU

50. Prefetch

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

    user action from access logs Rendering speed-up using Prefetch

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

53. BFF Client API Request SSR Request Response Response Learning Server

    .PEFM Response Request ୯७Ϛϧίϑաఔ Markov process

54. BFF Client API Request SSR Request Response Response Learning Server

    .PEFM Response Request ୯७Ϛϧίϑաఔ Markov process ࣍ʹऔಘ͢΂͖ϦιʔεΛϔομʹ஫ೖ
    #''
    JOKFDUT
    JOUP
    UIF
    IFBEFS
    SFTPVSDFT
    SFRVJSFE
    OFYU

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

56. BFF Client API Learning Server .PEFM Request Request Response Response

    LRU-cache SET

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

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

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

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

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

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

61. BFF Client API Learning Server .PEFM click CSR Request Request

    Request Response Response Response

62. WebWorker × Suspence

63. None
64. None

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

66. None

67. worker.js

68. Hello.js

69. App.js

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

71. Comlink ❤ Suspense

72. Lazy Rendering

73. None

74. ༏ઌ౓͕ߴ͍ High priority

75. ༏ઌ౓͕௿͍ Low priority

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

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

    stress-free to use AirSHIFT

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

    approaches

79. ͋Γ͕ͱ͏ Thank you

80. None