现代 web 随便一个页面都会用到 GPU 加速功能？

[abcbuzhiming]

现在感觉随便开一个网页，都没涉及到什么游戏，视频之类的，就可以看到 GPU 的占用在往上跳。我想了解一下，现代 web 的渲染引擎它哪些地方，除了众所周知 webGL 这种肯定会调用 GPU 加速之外，还有哪里，会用 GPU 加速？

[Shanky]

网页组件渲染，比如 MUI 的文档，不开硬件加速卡卡的

[weixind]

一部分 CSS 属性（ transform 等）会触发浏览器使用 GPU 加速。还有 canvas 之类比较常用的内容。

[fwh]

css 的有些属性会开启硬件加速，比如 translate3d()，有时候为了网页性能，会故意设置这些属性，即使用不到

[ltq918]

应该无处不在吧，CSS 的一些效果，甚至页面滚动都有影响

[across]

web 开发只是把数据组织起来交给浏览器的渲染引擎，浏览器的渲染引擎也是一个渲染器啊。
你用的每一项，文字、图片叠加、合成，不是软件渲染就是 GPU 渲染。
https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/

[besto]

这个问题，掰碎了非常大：
大多数人讨论的 GPU ，都是桌面显卡，显卡里可不止有 GPU 还有 VPU 和 DISP （可能还有 NN ），有利用率的是 GPU 和 VPU ，看视频的时候 VPU 如果动了，利用率当然会上去；
除去视频，我们单纯讨论网站，简而言之就是任何一个矩形区域，对 GPU 来说都是 2 个三角形+若干纹理，对 GPU 来说实现一个矩形的缩放旋转等是非常容易的，这也就是传统的 3D 给 2D 加速。

[xtreme1]

具体你得看 skia

[ChefIsAwesome]

页面滚动啊。

[wang93wei]

不用 GPU 就光 CPU 渲染就会卡卡的。你看一下国产 CPU ，用一下国产操作系统就知道了。

[june4]

现在的前端动效优化杂技都是在讲怎么利用硬件加速，比如明明是个 2d 转换非要 translate3d 一下，到底哪个低碳我也不是很清楚

[ysc3839]

现代浏览器，整个浏览器所有画面都是尽可能使用 GPU 加速的。
或者说不管任何程序，界面都应该优先使用支持 GPU 加速界面库。

总有人说微信 Windows 版用起来感觉卡，其中一个原因是它用的界面库还在使用 GDI 进行渲染，而目前 GDI 是只有拷贝能使用 GPU 加速，其他操作都是 CPU 渲染。

[DOLLOR]

记得最早是 IE9 宣传 GPU 加速渲染的，后来各浏览器厂商也开始搞 GPU 加速了。

[sakujo]

b 站看视频我的风扇就狂转

[kuanat]

@sakujo #13

不开弹幕的话，就是单纯的扣一块区域，调用硬件解码器。浏览器本身是不负责播放区域的，系统窗口合成器把浏览器渲染的其他部分与视频解码的播放部分进行叠加。这个过程里，显卡的 Render/3D 单元的占用取决于视频是否在播放。暂停的话占用率会立即下降。

如果开启弹幕，弹幕区域等价于在跑一个 3D 应用，这个应用就是在播放区域之上渲染一个透明层，然后把弹幕显示上去，一般这个 3D 应用的帧率会和屏幕刷新率一致。即使视频暂停，这个透明层依旧不会停止运行。（视频暂停会看到旧弹幕飘过，只是不加载新弹幕了。）

CPU 要负责生成弹幕的帧，同时一些类似于避开视频中的人物会加大计算量，因为这个功能实际上要抓取画面，然后计算分析生成绕开人物的蒙版。

风扇转是因为 cpu gpu 都在高负荷工作。手机这个功耗水平都能完成的事情，只要硬件解码正常工作，没有理由电脑还很吃力。

[Aloento]

@sakujo #13 视频软件解码了吧

[voiyy]

https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-fps-how-webrender-gets-rid-of-jank/

[jqtmviyu]

@sakujo #13 试试 avc, 也可能是解码的锅

[zckevin]

Open chrome://flags, search GPU:

- GPU rasterization
- Accelerated 2D canvas
- WebGPU
- Hardware-accelerated video decode
- ...

[rekulas]

gpu 上升是个好现象,说明网页设计充分利用了显卡算力, 效率会比 cpu 好不少

现在我们做后端开发都在考虑尽量面向 gpu 编程了, 能用 gpu 解决的尽量 gpu, 效率会高不少

[1360576570]

@sakujo #13

可以是软件或硬件的关系，开启硬解需要软硬件支持，缺一不可。软解自然风扇狂转。

软件方面，Chrome 48 开始支持 YouTube 使用的 VP9 硬解，而直到近年的 Chrome 107 才开始支持 B 站使用的 HEVC 硬解。此外如果使用的是 Windows 7 系统，即使安装的是最新的 Chrome 版本，也无法开启这些次世代视频格式的硬解（仅支持 AVC 硬解）。

硬件方面，Intel 从 HD 500 系列核显（酷睿 6 代）开始支持 HEVC 硬解，从 UHD 600 系列核显（酷睿 7~10 代）开始支持 VP9 硬解。NVIDIA 从 Pascal 架构（ GTX1000 系）开始支持 HEVC 和 VP9 硬解。

个人觉得 B 站强推 HEVC 对 Windows 7 用户非常不友好，而 B 站自己却节省了带宽费用。