Bilibili 网页卡顿问题

复现步骤

1. 用 PC 浏览器打开这个上古低分辨率视频合集【《魔兽》简史 160分钟让你了解魔兽上下万年历史——魔兽、炉石玩家必看】
2. 按 Shift + Esc 打开 Firefox/Chrome 的任务管理器，以便观察内存的变化
3. 从第一集开始播放，每集视频播放 5s 切换下一集，一直播放到最后一集
4. 不要刷新页面，重复步骤 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