React Performance Tuning

React Meet up with zeit @2019.04.19

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
26. ؔ਺ͷ࣮ߦ͚ͩͰ110ms 110ms with function execution only ϘτϧωοΫ ͦͷ1 Bottleneck 1
27. Կͯ͠Δͷ͔ʁ What is actually happening?
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
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
65. ͦͷ··૊Έ߹ΘͤΔͷ͸গ͠େม A bit difficult to combine these.
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
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