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
サポートエンジニアから見たRancher運用の現場
masap
0
110
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
nayuts
0
130
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
2
1.1k
Vault meets Kubernetes
mochizuki875
0
150
Flutterでキャッチしないエラーはどこに行く
taiju59
0
210
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
810
JavaScript 研修
recruitengineers
PRO
6
1.4k
見てわかるテスト駆動開発
recruitengineers
PRO
6
2.4k
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
1k
DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす
hacusk
1
140
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
250
kubellが考える戦略と実行を繋ぐ活用ファーストのデータ分析基盤
kubell_hr
0
120
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Navigating Team Friction
lara
189
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Docker and Python
trallard
45
3.5k
Producing Creativity
orderedlist
PRO
347
40k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
YesSQL, Process and Tooling at Scale
rocio
173
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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