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のパフォーマンス改善例
Search
rakus frontend
May 22, 2024
Technology
0
310
Reactのパフォーマンス改善例
rakus frontend
May 22, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
17
ErrorBoundaryとSuspenseの導入検討
rakus_fe
0
280
日付をもう少し真面目に勉強中
rakus_fe
0
13
React19 β をざっと見る
rakus_fe
0
210
Typescript5.4の新機能
rakus_fe
0
200
非破壊的な配列メソッド
rakus_fe
0
260
ココがすごいぜ!Playwright Component Test
rakus_fe
0
310
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
140
Other Decks in Technology
See All in Technology
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
270
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
910
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
750
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
Featured
See All Featured
Docker and Python
trallard
37
2.9k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Ruby is Unlike a Banana
tanoku
96
10k
How to name files
jennybc
67
96k
A designer walks into a library…
pauljervisheath
201
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
We Have a Design System, Now What?
morganepeng
46
7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Statistics for Hackers
jakevdp
792
220k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Transcript
ReactͷύϑΥʔϚϯεվળྫ
ࠓͷ͓ https://web.dev/articles/rail?hl=ja
RAILϞσϧͱ RAILGoogleࣾͷ։ൃऀͰ͋Δ Ilya Grigorik ࢯ͕ఏ এͨ͠ύϑΥʔϚϯεϞσϧͰ͢ɻ ग़యɿWebϑϩϯτΤϯυϋΠύϑΥʔϚϯενϡʔχϯά RAILɺResponse, Animation, Idle,
Loadͷ֤୯ޠͷ ಄จࣈΛऔ໊͚ͬͯΒΕ·ͨ͠ɻ RAILɺϢʔβʔΛத৺ͱͨ͠ύϑΥʔϚϯεϞσϧ Λඪᒗ͠·͢ɻ
ࠓͷ͓ https://web.dev/articles/rail?hl=ja 👉
Responseͱ ResponseɺϢʔβʔ͕ԿΒ͔ͷΞΫγϣϯʹର͠ ͯΣϒϖʔδ͕ϢʔβʔΠϯλʔϑΣΠε্ͷมԽ ΛҾ͖ىͯ͜͠ɺԠ͢Δ·Ͱͷ࣌ؒΛࢦ͠·͢ɻ
Responseͱ
Responseͱ 👉 Googleఏএඪ
Responseͱ 👉 ݱ࣮తͳඪ
ϥΫεϓϩμΫτʹ͓͚Δ 500ߦͷςʔϒϧ
ϥΫεϓϩμΫτʹ͓͚Δ (ms) 1ճ 2ճ 3ճ 4ճ 5ճ 6ճ 7ճ 8ճ
9ճ 10ճ res 2306 2698 2523 3122 2546 2472 2382 2872 2619 2465 2659ms 75ύʔηϯλΠϧ
ϘτϧωοΫௐࠪ React Developer Tools
ෆཁͳϨϯμϦϯάͷݮ ίϯϙʔωϯτ͕࠶ϨϯμϦϯά͞Εͨཧ༝Λ ϩάग़ྗͯ͘͠ΕΔϥΠϒϥϦ https://github.com/welldone-software/why-did-you-render
ෆཁͳϨϯμϦϯάͷݮ install vite.config.ts main.tsx
ෆཁͳϨϯμϦϯάͷݮ
ෆཁͳϨϯμϦϯάͷݮ ؔςʔϒϧηϧίϯϙʔωϯτͷϝϞԽΛߦ͏
ෆཁͳϨϯμϦϯάͷݮ ͪΐͬͱͨ͠ίʔυͷॻ͖ํͷҧ͍Ͱ ϝϞԽ͕ޮ͔ͳ͘ͳΔͨΊҙ͢Δ 👎 👍
ෆཁͳϨϯμϦϯάͷݮ ͪΐͬͱͨ͠ίʔυͷॻ͖ํͷҧ͍Ͱ ϝϞԽ͕ޮ͔ͳ͘ͳΔͨΊҙ͢Δ
ෆཁͳϨϯμϦϯάͷݮ
ෆཁͳϨϯμϦϯάͷݮ վળલ վળޙ
ύϑΥʔϚϯεൺֱ (ms) 1ճ 2ճ 3ճ 4ճ 5ճ 6ճ 7ճ 8ճ
9ճ 10ճ վળલ 2306 2698 2523 3122 2546 2472 2382 2872 2619 2465 վળޙ 465 481 503 562 561 479 545 483 498 491 2659ms 524ms 🎉
վળલ վળޙ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠