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

E8dde3bdd21542507a606a60a2101e66?s=128

Kento TSUJI

April 19, 2019
Tweet

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 $SFBUFXPSL 4DIFEVMF -JTUVQTIJGUT $PMMFDUTIJGUT
 GSPNQBSUT 3FNJOE 1SJOUPVU 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[BUJPOSFSFOEFSJOH େ͖ͳςʔϒϧͷ7JSUVBMJ[FEԽ

    7JSUVBMJ[FEMBSHFTDBMFUBCMFDPNQPOFOU Nodefest’ 18ɺHTML5 Conf Ͱ঺հ Introduced Nodefest’ 18 and HTML5 Conf
  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
  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. 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
  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 ࣍ʹऔಘ͢΂͖ϦιʔεΛϔομʹ஫ೖ #''JOKFDUTJOUPUIFIFBEFSSFTPVSDFTSFRVJSFEOFYU
  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