仮想スクロール

[syuilo]

Summary

[Candinya]

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 )

[syuilo]

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

[syuilo]

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

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

ほむん

[kakkokari-gtyih]

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

[syuilo]

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

[kakkokari-gtyih]

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

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

これ解消したのかしら

[syuilo]

解消してた

[kakkokari-gtyih]

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

[syuilo]

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

[kakkokari-gtyih]

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

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

[syuilo]

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

[syuilo]

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

[syuilo]

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

[syuilo]

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

[syuilo]

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

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