misskey 仮想スクロール

Summary

Feb 20 '20 15:02 syuilo

Find a library https://github.com/Akryum/vue-virtual-scroller which might be helpful. (Type definitions may refer to https://github.com/Akryum/vue-virtual-scroller/issues/199#issuecomment-1554748760 )

Oct 12 '23 03:10 Candinya

今積極的にメンテナンスされているライブラリが無いかも
pull to refreshと相性が悪い可能性がある

Jul 28 '24 07:07 syuilo

https://zenn.dev/inokawa/articles/94a73a2f035f0b

調べてみたところ、Reactコミュニティ同様、Vueコミュニティにある既存の仮想スクロール実装も完璧な訳ではないよう

ほむん

Jul 28 '24 07:07 syuilo

virtua/vueが良さそうだと思って実装を試みたことがあるけど、MkDateSeparatedListと相性が良くなかったか何かで挫折した覚えがある（内製したほうがいいかもしれない…？）

Jul 28 '24 07:07 kakkokari-gtyih

https://github.com/misskey-dev/misskey/commit/2190092de6409c5dbb02a042d98918580171f4c2 これでめちゃくちゃ軽くなった(仮想スクロールに匹敵するレベル)

Oct 14 '24 02:10 syuilo

2190092 これでめちゃくちゃ軽くなった(仮想スクロールに匹敵するレベル)

これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、下の方までスクロールすると上のノートの高さがここで決め打ちされたものに変化し、表示しているノートの位置が変わってしまう

これ解消したのかしら

Oct 14 '24 03:10 kakkokari-gtyih

解消してた

Oct 14 '24 03:10 syuilo

確かにスクロールしても表示される位置が変わったりとかはしなかったけど、表示されてない要素の高さの再計算が何度も走ってスクロールバーが荒ぶってたので微妙かも

Oct 15 '24 03:10 kakkokari-gtyih

それはどうやって再現できるかしら

Oct 15 '24 03:10 syuilo

画像を含むノートや文面の長さがまちまちなタイムラインでスクロールしていると、ページ下部のfetchされる部分に達していないのにスクロールバーの高さがコンスタントに変わる（それが実際に重いかどうかはわたしのPC自体が開発中重いので検証できない）

https://github.com/user-attachments/assets/c1350732-61a0-411f-8b63-974d29fb6463

Oct 15 '24 04:10 kakkokari-gtyih

あーこれはそういうやつだわね

Oct 15 '24 04:10 syuilo

表示されてない部分のレンダリングをスキップしているから高さは予め決めたやつになる

Oct 15 '24 04:10 syuilo

仮想スクロールにしろcontent-visibilityにしろ、表示されてない部分のレンダリングをスキップして高速化する実装は多かれ少なかれスクロールバーの正確性は犠牲になる

Oct 15 '24 04:10 syuilo

まあ「スクロールバーがガタガタする」こと自体は今までもリアクションなどで高さが変化することによって多少なりとも引き起こされてはいたし

Oct 15 '24 04:10 syuilo

表示されてない部分のレンダリングをスキップしているから高さは予め決めたやつになる

投稿の文字数や添付ファイル数などを加味して決めるようにすればズレは最小限にできそう(が、画面サイズなどの要因によっても変わるし、実装を複雑にしてまでやるメリットはなさそう)

Oct 15 '24 04:10 syuilo