B 站弹幕 CSS3 模式在 FireFox 下 CPU 狂飙至 90%，想知道为什么

[guolaopi]

如题，最近对象抱怨用我笔记本刷 B 站风扇会狂转， 然后我测试了一下， 发现 B 站的播放器（新版 H5 那个）有一个弹幕设置，可以选择是使用 canvas 还是 CSS3 来渲染弹幕。 然后通过改变弹幕设置发现性能会有很大的差别。

测试结果如下（均为全屏模式下观察任务管理器得到）：

FireFox

• CSS3 模式：CPU 会飙到 80%-90%左右，浏览器占用 CPU 大约 50%左右
• canvas 模式：CPU 会稳定在 50%-60%左右，浏览器占用 CPU 大约 30%左右

/我一直用 FireFox,特意去下了个 Chrome 对比用/

Chrome

• CSS3 模式：CPU 会飙到 60%-70%左右，浏览器占用 CPU 大约 30%-40%左右
• canvas 模式：CPU 会飙到 60%-70%左右，浏览器占用 CPU 大约 30%-40%左右

发现 Chrome 对这两种模式优化都挺好。

---

那么问题来了，

有没有大神来解答一下：

是不是 FireFox 下 CSS 的渲染优化存在什么问题？（先问是不是）

为什么？（再问为什么。。。）

[guolaopi]

有大佬回答一下吗

[wu67]

额, 你 toggle 一下硬件加速试试

[codehz]

FF 的一切问题直接给 FF 投递 bug ） https://bugzilla.mozilla.org/
总之不是网站的锅就对了（狗头）

[ysc3839]

说个题外话：我更愿意相信是 Firefox 自身的问题。不过如果这网站是 Google 的网站，估计又有人会说 Google 故意针对别的浏览器了。

[ChristianChen]

好奇试了下差别不大，chrome 下 canvas 模式略好一些，firefox 下 css3 模式略好一些，没有出现你说的飙升的情况

[wshwwl]

b 站是 ff 克星

[Beast]

我在前一段时间 chrome 也是这样子 bilibili 弹幕开始就明显能看见弹幕是成块撕裂的 cpu 疯狂负载

[guolaopi]

@wu67 刚看到，试过了不管用

[guolaopi]

@ChristianChen 那难道跟电脑有关系吗？用的小米笔记本 13 寸

[guolaopi]

@codehz （滑稽）

[guolaopi]

@Beast 我也是听人抱怨后才知道

[wiix]

嗯，一定是 B 站在打压 Firefox

[isteveyang]

到现在也是这样，css 就能用到 90%以上，我还和 Safari 对比了一下，相同 canvas 字幕密度大小设置 CPU 占用会多 20%，但是 css3，Safari 还是 30-40%左右，但是 Firefox 就变成 90%+，风扇等会就有声音了