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
200
巨大tableのパフォーマンスを改善する
https://anotherworks.connpass.com/event/285095/
hbsnow
July 14, 2023
Tweet
Share
More Decks by hbsnow
See All by hbsnow
フロントエンドエンジニアが顧客エンジニアとスクラムで伴走している話
hbsnow
0
69
お客さんのエンジニアとスクラムで 併走している話
hbsnow
0
62
Other Decks in Programming
See All in Programming
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
小さな開発会社を作った理由
polidog
0
1.9k
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
Namespace on read
tagomoris
2
370
日付と正規化
megmogmog1965
0
140
Featured
See All Featured
The Language of Interfaces
destraynor
151
23k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Typedesign – Prime Four
hannesfritz
37
2.2k
How to name files
jennybc
67
96k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
How STYLIGHT went responsive
nonsquared
93
5k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
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] フロントエンドエンジニア募集中です!