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
巨大tableのパフォーマンスを改善する
Search
hbsnow
July 14, 2023
Programming
0
550
巨大tableのパフォーマンスを改善する
https://anotherworks.connpass.com/event/285095/
hbsnow
July 14, 2023
Tweet
Share
More Decks by hbsnow
See All by hbsnow
フロントエンドエンジニアが顧客エンジニアとスクラムで伴走している話
hbsnow
0
160
お客さんのエンジニアとスクラムで 併走している話
hbsnow
0
120
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
510
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
1.6k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
660
AI Agent 時代的開發者生存指南
eddie
4
2.2k
理論と実務のギャップを超える
eycjur
0
180
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
110
モテるデスク環境
mozumasu
3
1.3k
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
120
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
For a Future-Friendly Web
brad_frost
180
10k
The Cult of Friendly URLs
andyhume
79
6.6k
Site-Speed That Sticks
csswizardry
13
930
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Thoughts on Productivity
jonyablonski
70
4.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
GraphQLとの向き合い方2022年版
quramy
49
14k
Transcript
巨大tableのパフォーマンスを改善する 1 クラスメソッド株式会社 高橋ゆうき 2023.06.22 Front-End Deep Dive
2 自己紹介 高橋ゆうき クラスメソッド株式会社 CX事業本部Delivery部 フロントエンドチーム チームリーダー @hbsnow
3 ある日、POに言われた ページの切替時に表示が 遅いんだけど なんとかなりませんか?
4 そこには巨大なテーブルがあった • よく使われるページのテーブルはデフォルト状態だと だいたい行100*列20 ◦ 行数はPagerで設定をかなり大きな数値に変更 ◦ 列は設定で最大130近くになる
5 指摘された問題はAPIのせいではない • このプロジェクトではページ切替時、切り替えた先の ページを一度でも開いていればリクエストを再取得し ていない • 今回指摘されたのはこのときの切替時、なぜAPIのリク エストがないのに表示に時間がかかるのかという点 ※これは参考なので
あくまでこんな感じというイメージです
6 windowing / 仮想スクロール の話でしょ? react-virtuoso react-window react-table + react-virtual
7 違うんです…… react-virtuoso react-window react-table + react-virtual
8 テーブルが複雑すぎて • 開発開始から3年の月日が経っているため、テーブルが 多くの複雑な機能を持っていて厳しかった…… ◦ 列のD&D ◦ 列・行のフィルター・検索機能 ◦
列の一時非表示機能 ◦ 行ソート ◦ 展開行 ◦ チェックボックスでの行絞り込み ◦ タグでの行絞り込み ◦ お気に入り など、さらに日々機能も追加される
9 requestIdleCallbackを使ってみる • 表示したい要素をchunk • requestIdleCallbackでCPUに余裕があるときに順次表 示するようにするDeferコンポーネントを作った 参考: Improving slow
mounts in React apps https://itnext.io/improving-slow-mounts-in-react-apps-cff5117696dc
10 サンプルで作ったのはこんなテーブル
11 サンプルはこちら https://hbsnow-sandbox.github.io /react-heavy-table/ サイト コード https://github.com/hbsnow-sandbox /react-heavy-table
12 before - Lighthouse
13 before - Performance
14 requestIdleCallback: after - Lighthouse
15 requestIdleCallback: after - Performance
16 requestIdleCallbackをつかったDeferコンポーネントの問題点 • 結局処理に時間がかかっていることには変わらないの で、微妙なスペックのPCだとtimeoutの時間をいくら 長くしたところで処理が終わらなくなってくる • 小刻みに行が増えていくので、セルの幅が突然変化す ることがある(幅を固定できるなら問題にならない)
17 メリットもあります • 導入コストが圧倒的に低い
18 ある日、POに言われた Part2 今度の新規ページのテーブル は3000行くらいで、Pagerは なしでお願いします
19 そもそも初期表示ですべて表示する必要はないのでは? • 数値Min-MAXでのフィルター • 文字列検索機能 • チェックボックスでのフィルター • タグでのフィルター
20 なら素直にIntersectionObserverで良かった • 表示したい要素をchunk • IntersectionObserverで最下部まで到達したら以降の コンテンツを読み込む
21 IntersectionObserver: Lighthouse
22 IntersectionObserver: Performance
23 だいぶ良くなったのでこれで終わり……? Pagerを作り、1ページにつき500件を表示してみる。 このときにnextを二回押すとどうなるか
24 Page1がスキップされる Page: 1 の表示は完全にスキップされて Page: 2 が表示される 表示に時間がかかる場合、UIがブロックされてユーザーは自分が いまどういう状況なのかわかりにくい
25 つまりUIをブロックせずに状態を更新したい useTransition
26 処理中であることをわかりやすく ついでにisPending中にLoaderを出しました
27 まとめ • 最初に思い浮かんだ方法が唯一の解決方法ではないかも しれません • 顧客が本当に解決したい課題は何かをヒアリングして、 実装方法に問題ないか確認する • requestIdleCallback・IntersectionObserverは便利
◦ 今回話にだしていませんが、requestIdleCallbackは polyfillが必要なので注意してください • UIがブロックされるとき、useTransitionが使えるかもし れません
28 おわり ありがとうございました [ad] 7/7・7/8 DevelopersIO 2023 もよろしくお願いします! [ad] フロントエンドエンジニア募集中です!