search

magicdawn / bilibili-app-recommend

[UserScript] B站首页推荐
https://greasyfork.org/zh-CN/scripts/443530
MIT License
403 stars 10 forks source link

[BUG]: 添加或移除稍后再看时有严重卡顿 #107

Closed DGCK81LNN closed 4 months ago

DGCK81LNN commented 4 months ago

环境

浏览器: Chrome 浏览器版本: 126.0.6478.61 脚本管理器: TamperMonkey Beta 脚本版本: 0.23.1

问题详细描述

在“查看更多”列表中加载的视频数量较多（几百个）时，将其中任一视频添加或移出稍后再看，会引起长达数秒的严重卡顿。通过 DevTools 分析，或许与 useSnapshot 函数被多次调用有关。

https://github.com/magicdawn/bilibili-app-recommend/assets/54282183/b169b6cf-00be-40a3-b5f4-3e4f21af6a34

预期结果

希望可以优化添加/移除稍后再看时的卡顿现象。

附件

视频较多时添加两个视频到稍后再看的 Performance Profile：Trace-20240618T091856.zip

视频较少时添加/移除一个视频稍后再看的 Performance Profile：Trace-20240618T093612.json

magicdawn commented 4 months ago

非常规使用情况，并不是 useSnapshot 的问题，纯碎是 DOM 承载不了这么多卡片的更新，现在没有使用 virtualize, 都存在 DOM中. 曾经尝试加过虚拟滚动，因为没调好（键盘上下左右移动 / 还有 skeleton 相关）所以现在就是不支持展示及更新大量卡片

没想到 400+ 就这么卡😂

DGCK81LNN commented 4 months ago

我说有关其实是想表达不需要变化的卡片好像也被更新了 假如把这个查看更多分页显示且允许用 J/K 键翻页的话，对我个人来说或许也可以接受，不过还是期待更好的解决方案

magicdawn commented 4 months ago

不需要变化的卡片好像也被更新了

现在稍后再看是全局状态, 比如你在动态里添加了一个稍后再看. reload 网页, 这个已添加的状态可以保存. (好像理所当然...但从代码角度就是维护一个 bvid set, 往这个 set 里加一个 bvid, 每个卡片都去检查一下...)

7439247 更新了下, 检查提前. 现在自测已经好很多了

卡片数量 1600 (bilibili_app_recommend_gridItems.length 获取 01

👉开发版: 包含未发布的更改 可以看下对你有没有改善

magicdawn commented 4 months ago

笔记: 虚拟滚动库 react-virtuoso 一直闪屏, 算了, 不往这个方向考虑了.

magicdawn commented 4 months ago

v0.24.0 released.