Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Performance Tuning
Search
Kento TSUJI
April 19, 2019
Technology
8
1.6k
React Performance Tuning
React Meet up with zeit @2019.04.19
Kento TSUJI
April 19, 2019
Tweet
Share
More Decks by Kento TSUJI
See All by Kento TSUJI
React製 SPA における パフォーマンスチューニング
maxmellon
24
8.5k
User Timing API with React Redux
maxmellon
0
210
Other Decks in Technology
See All in Technology
いかにして命令の入れ替わりについて心配するのをやめ、メモリモデルを愛するようになったか(改)
nullpo_head
7
2.6k
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
1
2k
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか?
cap120
1
630
Amazon Qで2Dゲームを作成してみた
siromi
0
140
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
sansan_randd
0
150
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
250
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
150
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
770
夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio
hachi_eiji
0
150
リモートワークで心掛けていること 〜AI活用編〜
naoki85
0
150
React Server ComponentsでAPI不要の開発体験
polidog
PRO
0
240
o11yツールを乗り換えた話
tak0x00
2
1.3k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.8k
How GitHub (no longer) Works
holman
314
140k
4 Signs Your Business is Dying
shpigford
184
22k
The Language of Interfaces
destraynor
158
25k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
800
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
Visualization
eitanlees
146
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Producing Creativity
orderedlist
PRO
347
40k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
GraphQLとの向き合い方2022年版
quramy
49
14k
Transcript
React Performance Tuning Kento TSUJI @maxmellon Recruit Technologies Co., Ltd.
React Meet up with zeit / 2019.04.19
Welcome to Japan!!!!! At asakusa © 2019 The Hotelier Group
Akasaka K.K. https://anaintercontinental-tokyo.jp/location/asakusa/
Profile • Github: @maxmellon • Twitter: @maxmellon_9039 • Start working
second year at the recruit-tech • Yosuke Furukawa’s subordinate *BN/FXCJF 'SPOUFOE&OHJOFFS ✨ ✨
Let me introduce one My favorite food
Udon ͏ͲΜ
:VVVVN
Let’s talk about main subject
What am I doing in R-tech • Develop “AirSHIFT” •
Develop new features • Improve performance • Performance Hackson in frontend • In other products than AirSHIFT
What is the “AirSHIFT” ?
"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
So rich UI as Desktop Application
Architecture
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
͜Ε·ͰͷύϑΥʔϚϯεվળ Performance improvements so far
̎ͭͷΞϓϩʔνͰվળ 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
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
Before 13,529ms After 3,612ms CPU x4 slow Fast 3G Improvement
վળ 374%
͔͠͠… but…
13,529ms 3,612ms 3.6ඵ͍ͬͯͷʁ Is 3.6 second so fast?
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
͞ΒͳΔվળ͕ඞཁ Further performance improvement is needed
ࠓ͞ΒͳΔվળʹ͍ͭͯհ͠·͢ Today I’ll introduce further improvement
ϘτϧωοΫͷௐࠪ Investigation of bottlenecks
ௐࠪ݅ Research condition • /sft/monthlyshift/201701 → /sft/monthlyshift/201702 ͷભҠ •
ը໘αΠζ 1440 x 900 (ϝΠϯλʔήοτ) transition Display size Main target
None
ؔͷ࣮ߦ͚ͩͰ110ms 110ms with function execution only ϘτϧωοΫ ͦͷ1 Bottleneck 1
Կͯ͠Δͷ͔ʁ What is actually happening?
None
None
None
None
None
None
େྔͷmomentͷΠϯελϯεΛੜ Create many instances of moment
ϘτϧωοΫ ͦͷ2 Bottleneck 2 ͯ͢ಉ͡ίϯϙʔωϯτ All same components ΞΫγϣϯ͕dispatch͞ΕΔͱ࠶ϨϯμϦϯά͕ى͖Δ Re-render
happens with each action dispatch
ͳͥ࠶ϨϯμϦϯά͕ൃੜʁ Why re-render?
reselectΈΜͳͬͯΔʁ Reselect ͕ ຖճҧ͏ Object Λฦ٫͍ͯͨ͠ reselect was returning different
object each time
None
ଞʹ͍͔ͭ͘ϘτϧωοΫ͕͋ͬͨ There were more bottlenecks
1ͭ1ͭվળͯ͠Ϩϙʔτʹ·ͱΊͨ All of them were resolved and summarized in reports
Moment Λେྔʹੜ͍ͯ͠Δ • ಉ͡ͷ࠶ੜ͍ͯͨ͠ͷͰͻͱ·ͣmemoize • ͯ͢UnixTimeʹΑΔܭࢉʹॻ͖͍ͨ͠ ˠ ͨͩɼ͓ۚपΓσάϨͬͨͱ͖ͷϦεΫ͕େ͖͘அ೦ Hope to
re-implementation by unix time. Memoized instance for a while Issue 1: many moment instances
Reselect ͕ຖճҧ͏ObjectΛੜ͍ͯ͠Δ • Reselect ͷΛνʔϜͰ࠶֬ೝ • ΞϯνύλʔϯΛհͯ͠࠶ൃࢭ Issue 2: reselect
returning different object each time Introduced how to use reselect and anti-patterns to team
ͦͷ݁Ռ Results
50%ͷϢʔβʔ1.5ඵҎʹ Ӿཡ͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪
⚪ ⚪ ⚪ ⚪ 50% of users can load the page within 1.5sec
75%ͷϢʔβʔ3.0ඵҎ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ ⚪ 75% of
users can load within 3.0 sec
Γ25%3ඵͰඳըग़དྷ͍ͯͳ͍ 25% of users take longer than 3 sec
͜ͷ40%͕ͷՄೳੑ ୯७ʹͯΊΔͱ 40% of them might leave
ࠓɼ͜ΕΛղܾ͢ΔͨΊͷࢪࡦΛݕ౼͍ͯ͠Δ We are examining to solve this
͜ΕΒͷϢʔβʔͷಛ • ଞͷϢʔβʔΑΓCPUͷੑೳ͕͍ʢͱਪଌͰ͖Δʣ CPUΛΘͳ͍Ξϓϩʔν͕ඞཁ The characteristic of these users have
lower CPU spec than other users Will need approach that DON'T use CPU
Prefetch
PrefetchʹΑΔϖʔδදࣔͷߴԽ /monthly /daily 44% 10% ཌͷ ༧ఆ֬ೝ͠Α͏ʂ ࣍ͷߦಈΛ༧ APIͷΞΫηεϩά͔ΒΛਪଌ Research
user action from access logs Rendering speed-up using Prefetch
BFF Client API Request Request Learning Server .PEFM Request
BFF Client API Request SSR Request Response Response Learning Server
.PEFM Response Request ୯७Ϛϧίϑաఔ Markov process
BFF Client API Request SSR Request Response Response Learning Server
.PEFM Response Request ୯७Ϛϧίϑաఔ Markov process ࣍ʹऔಘ͖͢ϦιʔεΛϔομʹೖ #''JOKFDUTJOUPUIFIFBEFSSFTPVSDFTSFRVJSFEOFYU
BFF Client API Learning Server .PEFM Parse Header Pre-fetch Request
BFF Client API Learning Server .PEFM Request Request Response Response
LRU-cache SET
BFF Client API Learning Server .PEFM LRU-cache exist ? click
BFF Client API Learning Server .PEFM LRU-cache exist ? click
ߦಈ༧͕ ”͋ͨͬͨ” ࣌ When the expectation was met
BFF Client API Learning Server .PEFM LRU-cache GET click CSR
BFF Client API Learning Server .PEFM LRU-cache exist ? click
ߦಈ༧͕ ”֎Εͨ” ࣌ When an expectation is missed
BFF Client API Learning Server .PEFM click CSR Request Request
Request Response Response Response
WebWorker × Suspence
None
None
ͦͷ··Έ߹ΘͤΔͷগ͠େม A bit difficult to combine these.
None
worker.js
Hello.js
App.js
https://git.io/fjOCk (maxmellon/react-with-comlink-sample)
Comlink ❤ Suspense
Lazy Rendering
None
༏ઌ͕ߴ͍ High priority
༏ઌ͕͍ Low priority
ॏ͍ܭࢉ͕ඞཁ Required heavy calculation
͜ΕΒͷࢪࡦͰͯ͢ͷϢʔβʔ͕ ετϨεແ͘ར༻Ͱ͖Δͷ͕ཧ I hope these measures will make all users
stress-free to use AirSHIFT
͠ɼհͨ͠ΞϓϩʔνҎ֎Ͱ ༗ޮͦ͏ͳ͕͋Εڭ͑ͯ΄͍͠ Please tell me if you know other effective
approaches
͋Γ͕ͱ͏ Thank you
None