Tweet
Tweet

Slide 1

Slide 1 text

React Performance Tuning Kento TSUJI @maxmellon Recruit Technologies Co., Ltd. React Meet up with zeit / 2019.04.19

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Profile • Github: @maxmellon • Twitter: @maxmellon_9039 • Start working second year at the recruit-tech • Yosuke Furukawa’s subordinate *BN/FXCJF 'SPOUFOE&OHJOFFS ✨ ✨

Slide 4

Slide 4 text

Let me introduce one My favorite food

Slide 5

Slide 5 text

Udon ͏ͲΜ

Slide 6

Slide 6 text

:VVVVN

Slide 7

Slide 7 text

Let’s talk about main subject

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

What is the “AirSHIFT” ?

Slide 10

Slide 10 text

"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

Slide 11

Slide 11 text

So rich UI as Desktop Application

Slide 12

Slide 12 text

Architecture

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

̎ͭͷΞϓϩʔνͰվળ 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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

͔͠͠… but…

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Moment Λେྔʹੜ੒͍ͯ͠Δ໰୊ • ಉ͡΋ͷ࠶ੜ੒͍ͯͨ͠ͷͰͻͱ·ͣmemoize • ͢΂ͯUnixTimeʹΑΔܭࢉʹॻ͖௚͍ͨ͠
 ˠ ͨͩɼ͓ۚपΓ͸σάϨͬͨͱ͖ͷϦεΫ͕େ͖͘அ೦ Hope to re-implementation by unix time. Memoized instance for a while Issue 1: many moment instances

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

ͦͷ݁Ռ Results

Slide 44

Slide 44 text

50%ͷϢʔβʔ͸1.5ඵҎ಺ʹ
 Ӿཡ͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ 50% of users can load the page within 1.5sec

Slide 45

Slide 45 text

75%ͷϢʔβʔ͸3.0ඵҎ಺ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ 75% of users can load within 3.0 sec

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Prefetch

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

BFF Client API Request Request Learning Server .PEFM Request

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

BFF Client API Learning Server .PEFM LRU-cache exist ? click ߦಈ༧૝͕ ”͋ͨͬͨ” ࣌ When the expectation was met

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

BFF Client API Learning Server .PEFM LRU-cache exist ? click ߦಈ༧૝͕ ”֎Εͨ” ࣌ When an expectation is missed

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

WebWorker × Suspence

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

worker.js

Slide 68

Slide 68 text

Hello.js

Slide 69

Slide 69 text

App.js

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Comlink ❤ Suspense

Slide 72

Slide 72 text

Lazy Rendering

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

༏ઌ౓͕ߴ͍ High priority

Slide 75

Slide 75 text

༏ઌ౓͕௿͍ Low priority

Slide 76

Slide 76 text

ॏ͍ܭࢉ͕ඞཁ Required heavy calculation

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

͋Γ͕ͱ͏ Thank you

Slide 80

Slide 80 text

No content