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
Recruit Technologies
April 19, 2019
Technology
1
470
React Performance Tuning
2019/4/24 React Tokyo with ZEITでの、辻の講演資料になります
Recruit Technologies
April 19, 2019
Tweet
Share
More Decks by Recruit Technologies
See All by Recruit Technologies
障害はチャンスだ! 障害を前向きに捉える
rtechkouhou
1
670
Flutter移行の苦労と、乗り越えた先に得られたもの
rtechkouhou
3
11k
ここ数年間のタウンワークiOSアプリのエンジニアのチャレンジ
rtechkouhou
1
1.5k
大規模環境をAWS Transit Gatewayで設計/移行する前に考える3つのポイントと移行への挑戦
rtechkouhou
1
1.9k
【61期 新人BootCamp】TOC入門
rtechkouhou
3
42k
【RTC新人研修 】 TPS
rtechkouhou
1
41k
Android Boot Camp 2020
rtechkouhou
0
41k
HTML/CSS
rtechkouhou
10
51k
TypeScript Bootcamp 2020
rtechkouhou
9
45k
Other Decks in Technology
See All in Technology
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
330
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
360
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
290
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.8k
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
7
3.3k
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
1.1k
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
220
Qiita Organizationを導入したら、アウトプッターが爆増して会社がちょっと有名になった件
minorun365
PRO
1
300
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
290
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.6k
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.5k
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
9
4k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Thoughts on Productivity
jonyablonski
69
4.5k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Scaling GitHub
holman
459
140k
What's in a price? How to price your products and services
michaelherold
244
12k
Raft: Consensus for Rubyists
vanstee
137
6.8k
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