同一个页面，换掉渲染后端就快了 15%——Chrome 的 Skia Graphite 把 Ganesh 送走了

同一个页面、同一段代码、同一块屏幕，只是把浏览器的光栅化后端换掉，MotionMark 1.3 的分数就往上跳了将近 15%。这不是什么新显卡，也不是你的 JS 突然变快了——是 Chrome 把用了十几年的 Ganesh 送走，换上了一套为 Vulkan、Metal、D3D12 重写的地基，代号 Graphite。

先说结论：这次换的不是某个 API，而是「浏览器把 CSS 和 DOM 画成像素」的那一层。过去你能优化的只有自己那点代码，现在浏览器自己那一段也被重新写过了。好消息是你不用改一行业务代码就能吃到红利；坏消息是，你以前用来诊断卡顿的那套经验，有一部分已经不准了。

先把链路讲清楚。浏览器要显示一个页面，最终都得经过光栅化：把 Blink 送来的绘制指令翻译成屏幕上的像素。Chrome 里干这件事的是 Skia，而 Skia 需要选一个 GPU 后端。老后端叫 Ganesh，出生在 OpenGL ES 的年代。它在那个时代是很能打的，也支撑了 Chrome 全平台的 GPU 光栅化，但它的设计是「OpenGL 中心」的：命令提交单线程、代码里散落着一堆特化路径，而且没有深度缓冲，重叠绘制全靠「画家算法」的先后顺序硬排。这带来两个老毛病——一是没见过的着色器管线要现场编译，动画放到一半突然卡一下；二是重叠区域被反复着色，白白烧掉 GPU 的填充率。

Graphite 是推倒重来。它从第一天就照着现代显式图形 API 来设计，底层直接复用 Chrome 自己的 WebGPU 实现 Dawn 去对接 Metal、Vulkan、D3D12。它改了三个真正影响吞吐的点：

第一，默认多线程。独立的 Recorder 对象在 worker 线程上各自录制绘制命令，最后并行提交，不再挤在一条命令队列里排队。

第二，给 2D 加了深度测试。每次绘制都按画家算法的位置分配一个 z 值，于是不透明的绘制可以自由重排，靠深度缓冲保证结果正确——重叠区域的重复着色被大幅砍掉。

第三，管线预编译。着色器管线在启动时（配合 SkiaGraphitePrecompilation 还能跨启动持久化）就编译好，动画不用再为「第一次见到的新管线」买单。

官方的数据是这样：MacBook Pro M3 上 MotionMark 1.3 提升接近 15%，同时 INP、LCP、掉帧率、GPU 进程的内存占用都一起变好。Phoronix 的跟踪也提到在 Apple Silicon Mac 上实测到约 30% 的 Skia 渲染提升。翻译成体感就是：交互更跟手、滚动更少抖、首屏等得更短。而且这些指标不是「合成 benchmark」，INP 和 LCP 都是你平时盯的那几个。

你真正需要知道的是「什么时候轮到我的用户」。截至 Chrome 138，Graphite 已经在 Apple Silicon 的 Mac 上默认开启；其他平台仍然是 opt-in，通过 –enable-features=SkiaGraphite，再挑一个后端，比如 –skia-graphite-backend=metal。换句话说，Mac 用户可能已经在不知不觉中享受到了，而你办公室那台 Intel 或者 AMD 的机器还没有。

所以给你的可落地下一步很简单：

一，打开 chrome://gpu，看刷的是 Ganesh 还是 Graphite，再看看 Canvas、WebGL、Video Decode、Compositing 这几行到底是不是真的硬件加速。这一步比装任何性能插件都值。

二，如果你在做 Electron 或者基于 Chromium 的客户端，可以试着传 –enable-features=UseSkiaGraphite,SkiaGraphitePrecompilation，先把自研的渲染路径跑一遍。注意这条命令依赖你打包的 Chromium 已经合入 Graphite——下游发行版往往比上游谨慎得多，VSCode 用的 Electron 到现在都还没带上。

三，把你性能预算里的「重叠绘制」重新算一遍。Graphite 的深度测试让一部分曾经昂贵的 overdraw 变得便宜，但匹配条件是元素只发生 transform / opacity 变化、不带 filter / backdrop-filter、父级没有 overflow: hidden 阻断图层复用。条件不满足的，该省还是得省。

四，别再把「换后端」当成万能药。Graphite 依然是同一个渲染流水线，主线程长任务、强制同步布局、以及那些真正吃 CPU 的逻辑，它一个都救不了。浏览器能帮你的是绘制层，帮不了你的还是得自己拆。

一句话收尾：这轮升级的价值不在于多了一个开关，而在于它重新划定了「哪些卡顿该你自己背、哪些浏览器已经替你扛了」的边界。先去 chrome://gpu 看一眼，你就知道自己的机器站在哪一边。