Bilibili 网页卡顿问题
复现步骤
- 用 PC 浏览器打开这个上古低分辨率视频合集【《魔兽》简史 160分钟让你了解魔兽上下万年历史——魔兽、炉石玩家必看】
- 按 Shift + Esc 打开 Firefox/Chrome 的任务管理器，以便观察内存的变化
- 从第一集开始播放，每集视频播放 5s 切换下一集，一直播放到最后一集
- 不要刷新页面，重复步骤 3，直到页面卡顿到无法操作或者崩溃
测试结果
分别测试了三台不同的设备（台式机，ThinkPad，MacBook Pro M3 芯片），三种不同的操作系统（Linux，Windows，macOS），两种浏览器（Firefox, Chrome），以及 Bilibili 的三种不同播放策略（AV1, HEVC, AVC），开启和关闭弹幕。
总结下来，Bilibili 在不同操作系统和不同浏览器中，都存在连播视频内存溢出的情况。在 Firefox 内存飙升的速度更快，卡顿出现的更早，连播 30 个视频就顶不住了。而 Chrome 则由于效率更高，卡顿现象明显少很多，但是标签页会在内存到达上限后突然崩溃。在内存越少的设备上，标签页被分配的内存上限也更少，卡顿/崩溃出现的越快。开启和关闭弹幕对测试结果几乎没有什么影响。
Linux
系统信息：
- CPU: AMD R5 5600X
- RAM: 32GB
- GPU: AMD RX6700 10GB
- OS: openSUSE Tumbleweed (Linux)
Firefox 124：
- AV1：在播放到 32 次时页面卡住，CPU 100%（单核），内存 5GB
- HEVC：在播放到 28 次时页面卡住，CPU 100%（单核），内存 5GB
- AVC：在播放到 37 次时页面卡住，CPU 100%（单核），内存 5GB
Chrome 122：
- AV1：在播放到 57 次的时候页面失去响应后崩溃，CPU 100%（单核），内存 4.8GB
- HEVC：在播放到 48 次的时候页面失去响应后崩溃，CPU 100%（单核），内存 4.8GB
- AVC：在播放到 73 次的时候页面失去响应后崩溃，CPU 100%（单核），内存 4.8GB