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
350
Reactのパフォーマンス改善例
rakus frontend
May 22, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
26
ErrorBoundaryとSuspenseの導入検討
rakus_fe
0
340
日付をもう少し真面目に勉強中
rakus_fe
0
20
React19 β をざっと見る
rakus_fe
0
240
Typescript5.4の新機能
rakus_fe
0
220
非破壊的な配列メソッド
rakus_fe
0
280
ココがすごいぜ!Playwright Component Test
rakus_fe
0
350
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
150
Other Decks in Technology
See All in Technology
手軽に始める? おうちサーバーのすゝめ
nyagasan
0
180
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
160
標準ライブラリの奥深アップデートを掘り下げよう!
logica0419
2
390
2024年版 運用者たちのLLM
nwiizo
3
290
20240828_EM_Fest
kzkmaeda
4
360
株式会社M2X エンジニアチーム紹介資料
m2xsoftware
0
320
エンジニア採用を起点に取り組む組織の改善活動と課題、中長期のタスク管理/ #HRmethod
nishiuma
4
3.3k
Azure SQL Database Hyperscale HA レプリカの監視
sansantech
PRO
0
190
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
39k
Chunk computing
matyo91
0
270
実践ジオフェンス 効率的に開発するために
navitimejapan
PRO
2
130
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(1)Gitハンズオン
nomu
0
280
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
324
37k
Building Applications with DynamoDB
mza
89
5.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Adopting Sorbet at Scale
ufuk
72
8.9k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Raft: Consensus for Rubyists
vanstee
135
6.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Rails Girls Zürich Keynote
gr2m
93
13k
For a Future-Friendly Web
brad_frost
173
9.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
What's new in Ruby 2.0
geeforr
340
31k
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 🎉
վળલ վળޙ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠