巨大tableのパフォーマンスを改善する

巨大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は polyﬁllが必要なので注意してください • UIがブロックされるとき、useTransitionが使えるかもしれません

28 おわりありがとうございました [ad] 7/7・7/8 DevelopersIO 2023 もよろしくお願いします！ [ad] フロントエンドエンジニア募集中です！

巨大tableのパフォーマンスを改善する

巨大tableのパフォーマンスを改善する

hbsnow

More Decks by hbsnow

Other Decks in Programming

Featured

Transcript