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
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
3
390
室長の逆襲 :データ活用の陣地を増やすためのヒント
masatoshi0205
0
180
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
220
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
9k
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
6
260
An introduction to Claude Code SDK
choplin
3
3.3k
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
210
Jitera Company Deck / JP
jitera
0
140
Expertise as a Service via MCP
yodakeisuke
1
140
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
590
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
160
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
3
1.6k
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Building an army of robots
kneath
306
45k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
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