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
380
Reactのパフォーマンス改善例
rakus frontend
May 22, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
30
ErrorBoundaryとSuspenseの導入検討
rakus_fe
0
460
日付をもう少し真面目に勉強中
rakus_fe
0
25
React19 β をざっと見る
rakus_fe
0
250
Typescript5.4の新機能
rakus_fe
0
240
非破壊的な配列メソッド
rakus_fe
0
300
ココがすごいぜ!Playwright Component Test
rakus_fe
0
390
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
170
Other Decks in Technology
See All in Technology
My Generation 年配者がこの先生きのこるには (Developers CAREER Boost 2024 Edition)/My Generation How elder engineers can survive
kwappa
3
390
KubeCon NA 2024 Recap: Managing and Distributing AI Models Using OCI Standards and Harbor / Kubernetes Meetup Tokyo #68
pfn
PRO
0
120
問題を認識して解決できる人は何でもできる
i999rri
0
120
セキュリティ系アップデート全体像と AWS Organizations 新ポリシー「宣言型ポリシー」を紹介 / reGrowth 2024 Security
masahirokawahara
0
310
権威ドキュメントで振り返る2024 #年忘れセキュリティ2024
hirotomotaguchi
0
150
TimeTreeが経た3つの転換点 ー プロダクト成長過程でその時、その瞬間、何を考えてたか
ysmtysts
1
4k
振る舞い駆動開発(BDD)における、テスト自動化の前に大切にしていること #stac2024 / BDD formulation
nihonbuson
3
1.1k
pmconf2024_UPSIDER
upsider_tech
0
8k
長年運用されているサービスの主要データ移行をサービス停止せず安全にリリースしました
phayacell
2
200
OpenAIの蒸留機能(Model Distillation)を使用して運用中のLLMのコストを削減する取り組み
pharma_x_tech
1
140
Amazon Bedrock Multi-Agent Collaboration Workshop の紹介 - ワークショップでAIエージェントを学ぼう
nasuvitz
4
370
Kubernetesトラフィックルーティング徹底解説/Kubernetes-traffic-deep-dive
oracle4engineer
PRO
5
860
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
420
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Producing Creativity
orderedlist
PRO
341
39k
BBQ
matthewcrist
85
9.3k
Building Adaptive Systems
keathley
38
2.3k
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 🎉
վળલ վળޙ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠