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
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.2k
脳波を用いた嗜好マッチングシステム
hokkey621
0
290
Охота на косуль у древних
ashapiro
0
110
JavaにおけるNull非許容性
skrb
2
2.6k
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.8k
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
180
実は強い 非ViTな画像認識モデル
tattaka
3
1.3k
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
650
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
380
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
140
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
180
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
Featured
See All Featured
Designing for Performance
lara
604
68k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Building Applications with DynamoDB
mza
93
6.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Code Reviewing Like a Champion
maltzj
521
39k
What's in a price? How to price your products and services
michaelherold
244
12k
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