现代 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 站自己却节省了带宽费用。

[Biggoldfish]

@1360576570
Windows 7 在 2020 年就 EOL 了，花费 eng/bandwidth resource 去支持老旧系统得不偿失

[liyafe1997]

现在浏览器哪怕渲染最基本的元素，DOM ，CSS ，就是你看到网页上的一切，只要 GPU 可用都会用 GPU 渲染出来，不是只有你看到 3D 才用 GPU 。Chrome 可以看 chrome://gpu ，Firefox 可以看 about:support

包括 Windows 桌面，从 Vista 开始的 WDM 都是由 GPU Direct3D 合成的了，因此能够引入 Aero 各种特效和动画，你试试拖动窗口啥的 GPU 占用也会上去。

[totoro52]

你可以看下你的 QQ 音乐或者网易云，他们关掉 GPU 加速直接卡成翔

[ysc3839]

@1360576570 @Biggoldfish
Win7 不支持的主要原因是浏览器一般都会用 DirectX Video Acceleration 等系统提供的、通用的、与硬件无关的硬解接口，这类接口要支持新的编码需要操作系统和硬件驱动都进行更新。因为种种原因，微软没给 Win7 加入新的编码支持，即使硬件和驱动支持，那也是用不了的。

[mayli]

@kuanat 那为啥弹幕这个看起来很简单的行为，却需要这么复杂的计算呢？
就比如，为啥不能是一个 2D 应用，或者 css ，透明飘过一堆文字，这个对于浏览器来说应该不难吧。

[kuanat]

@mayli #25

现代操作系统的显示逻辑是 C/S 架构的，应用程序也就是客户端会申请一块显示区域作为 client area 用于显示（相对应的 host area 一般是标题栏、边框这些）。

没有硬件加速的情况下，客户端区域就是各种界面库 API 或者文字 API 绘制，直接把绘制结果以像素的形式填充到客户端区域。操作系统的窗口合成器（ compositor ）把桌面上所有应用的显示区域做叠加合成，交给显卡完成最终显示。

有硬件加速的情况下，比如窗口中部分区域播放视频，客户端依旧会声明一块显示区域，但中间挖出一部分，并表示这部分不由客户端负责。窗口合成器也会忽略这一部分（但是还会判断遮挡关系），此时显卡的 framebuffer 就是两部分，一部分是窗口合成器给的去掉视频区域的显示数据，另一部分是视频解码单元给的视频数据。

上个回复里说 3D 其实不准确，因为所有最终的渲染都是走的 3D 单元。在显卡看来，3D 单元就是渲染单元。这个语境下的 2D 一般是指无加速，就是客户端把结果绘制完了，合成器直接拿像素数据，而 3D 有加速就是绘制 API 直接在显示区域上进行操作。这里细节我不是很确定，但大致思路就是浏览器把所有绘制 API 后端都用 3D 指令来实现了，整个浏览器内部就是一个巨大的 3D 显示，skia 文字渲染引擎也是 3D 指令在页面上显示文字。

我上个回复里描述的 3D 渲染行为，是根据风扇狂转推测的浏览器的行为。因为我是 Linux 用户，所以对硬件加速感知很深。每个浏览器都有自己如何用显卡硬件单元完成加速的实现逻辑，最终效率和性能也差别很大。目前 bili 的弹幕功能是基于 css3 的，之前有过基于 canvas 的版本但可能是因为效率问题弃用了。

目前 Firefox/Chrome/Chromium 三个浏览器的表现都是不一样的：

- Firefox 就是我上个帖子里说的模式，会调用视频解码单元，但对于 css3 的加速就很弱。从显卡资源占用上说，比较大可能就是没有优化，直接在透明层上叠加。

- Chrome 官方打包版本对于硬件加速支持很不稳定，有些版本正常有些版本就没了。

- Chromium 主要看发行版适配，官方源会打针对自己发行版的补丁。在解码器和补丁都正常的情况下，效果是最好的。首先视频本身还会走硬件解码，但是 css3 特效并非 3D 透明层，而是调用 video enhance 硬件单元。这个硬件单元的作用原本是用作视频播放去噪点、锐化等功能的，Chromium 的实现里 css3 相当于实时调整原视频，所以大幅降低了 3D 渲染单元的负载。

[mayli]

@kuanat 感谢大佬，我大概明白了，这么看 video overlay 这个功能做起来还挺复杂的。
所以大概是视频解码不费劲，但是 css3 太费力了，费力程度跟渲染 ass 复杂字幕有一拼。

[e3c78a97e0f8]

FireFox 字体渲染用的 Directwrite ，而这个东西是有 GPU 加速的，所以都不用 css ，只要有字就可能上 GPU

Chrome 就不清楚了，我猜不会比 FireFox 更保守

[wxf666]

@kuanat #26 浏览器会利用系统的 DWM ，由其来单独合成普通页面与视频画面，而不是浏览器自己合成再提交？

放到 Windows 上说，就是利用了 DirectComposition ？

可这是 Win8 才引入的呀。。Win7- 是咋做到的呢？