Impeller 时代：Shader Jank 消失了，但渲染性能的战场也变了

欢迎关注微信公众号：FSA全栈行动 👋

一、现状：那些"过期"的优化经验

以前我们写 Flutter 性能优化文档，有一大半篇幅都在教大家怎么搞 SkSL 预热。

你会看到各种教程告诉你：使用 --cache-sksl 捕获着色器，或者通过 --bundle-sksl-path 把它们打包进 assets，甚至还要在启动页偷偷跑一遍动画来做 warm-up。

但到 2026 年这个节点，这些方案几乎全是"死代码"。

因为现在的 Flutter 在现代移动端（iOS 以及 Android 10+）上已经彻底去掉了 Skia 渲染引擎，默认直接上 Impeller。在 iOS 上 Impeller 是唯一选择（基于 Metal）；在 Android 10+ 上，它也是唯一的渲染器（基于 Vulkan），而且 Flutter 3.44 之后甚至连关掉它的开关都快没了。

Impeller 的出现解决了一个痛点：Shader 编译卡顿（Shader-compilation jank）。它通过 AOT（提前编译）的方式，让渲染过程变得极其稳定，再也不用担心用户第一次打开某个特效时突然卡一下。

但是，这里有一个巨大的误区：Impeller 解决了编译问题，但它并没有让 GPU 变得"免费"。

它杀死了 Shader 编译带来的卡顿，但它并没有杀死 离屏渲染（Offscreen Render Pass） 带来的卡顿。如果你还在用 saveLayer 或者频繁地做 BackdropFilter，即便你开了 Impeller，渲染线程（Raster Thread）依然会爆掉。

二、Impeller 的逻辑：什么解决了，什么还没解决

为了搞清楚该怎么优化，我们得先看明白 Impeller 到底是怎么画画的。

当 UI 线程把 Widget 树的 paint 逻辑交给渲染引擎后，Impeller 的执行流程大概是这样的：

Tessellation（细分） ：将你的矢量图形（Path、圆角矩形、文本等）转换成 GPU 能理解的三角形网格。这部分工作是在 Raster 线程上跑的 CPU 任务。
Shader Binding（着色器绑定） ：因为 Impeller 是预编译好的，这一步只是简单地选择并设置参数，不再有编译动作。这部分正是以前卡顿的重灾区，现在已经彻底搞定了。
Command Recording（命令录制） ：录制 Metal 或 Vulkan 命令流。
Offscreen Passes（离屏渲染） ：如果你用了 saveLayer、Opacity（非透明度 1）或 BackdropFilter，引擎就得额外开辟一块临时缓冲区，画完再贴回去。这才是现代 Flutter 渲染性能最大的敌人。

简单总结一下：Impeller 把第 2 步变"免费"了，你现在的工作重点是减少第 1 步和第 4 步的开销。

1、依然昂贵的"离屏渲染"

不要以为换了 Impeller 就可以随心所欲地用 saveLayer。以下这些操作在任何渲染引擎里都是"性能杀手"：

操作	为什么贵	更好的替代方案
`canvas.saveLayer()`	强制开启离屏缓冲 + 合成，开销极大	尽量直接画原生图形，避免为了做"组"效果而使用
`Opacity` (0 < alpha < 1)	会导致子树每一帧都被画进中间缓冲区	尽量在 `Color` 里直接写 `withValues(alpha: ...)`，或者用 `FadeTransition`
`Clip.antiAliasWithSaveLayer`	强制离屏裁剪	使用默认的 `Clip.antiAlias` 或 `BoxDecoration` 的圆角
`BackdropFilter`	极其沉重的帧缓冲读写	限制模糊范围，或者干脆预渲染一张图片作为背景

三、实战：如何从"重度开销"切换到"高效渲染"

我们直接通过一个 CustomPainter 的例子，看看如何识别并修复性能坑点。

1、错误写法：典型的"性能杀手"

下面这个 SlowChartPainter 犯了两个典型的错误：第一是每一帧都在重复构建复杂的 Path；第二是使用了 saveLayer 来做模糊效果。

Dart 复制代码

import 'package:flutter/material.dart';

// ❌ 错误示例：性能极差
class SlowChartPainter extends CustomPainter {
  SlowChartPainter(this.samples, this.t);
  final List<double> samples;
  final double t;

  @override
  void paint(Canvas canvas, Size size) {
    // 1. 每一帧都在重新构建复杂的 Path，浪费 CPU
    final path = _buildDataPath(size);

    // 2. 为了一个模糊效果使用了 saveLayer，强制触发离屏渲染
    canvas.saveLayer(Offset.zero & size, Paint())
      ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 8);

    canvas.drawPath(path, Paint()..color = Colors.blue);
    canvas.restore();
  }

  @override
  bool shouldRepaint(SlowChartPainter old) => true; // 极其粗暴的重绘逻辑

  Path _buildDataPath(Size size) { /* 复杂的路径构建逻辑... */ return Path(); }
}

2、正确写法：缓存与规避

我们要做的核心操作有两个：缓存静态部分 和避免离屏渲染。

Dart 复制代码

import 'dart:ui' as ui;
import 'package:flutter/material.dart';

// ✅ 正确示例：高效且平滑
class FastChartPainter extends CustomPainter {
  FastChartPainter(this.samples, this.t, this._gridCache);
  final List<double> samples;
  final double t;
  final ui.Picture _gridCache; // 缓存已经录制好的静态图形

  @override
  void paint(Canvas canvas, Size size) {
    // 1. 直接重放录制好的静态图像，几乎零开销
    canvas.drawPicture(_gridCache);

    // 2. 直接画线，避免 saveLayer，使用更轻量级的绘制方式
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;

    canvas.drawPath(_buildDataPath(size), paint);
  }

  @override
  bool shouldRepaint(FastChartPainter old) =>
      old.t != t || !identical(old.samples, samples);
}

// 在外部预先录制静态背景，不要在 paint 方法里做这件事
ui.Picture recordGrid(Size size) {
  final recorder = ui.PictureRecorder();
  final canvas = Canvas(recorder);
  final line = Paint()..color = Colors.grey.withValues(alpha: 0.3);
  for (double x = 0; x <= size.width; x += 40) {
    canvas.drawLine(Offset(x, 0), Offset(x, size.height), line);
  }
  return recorder.endRecording();
}

关键点：

用 ui.Picture 把那些不随动画变化的背景"录制"下来。
如果真的需要阴影或模糊，尽量用 BoxShadow 或者在静态资源上预处理，而不是在 CustomPainter 里实时开 saveLayer。

四、总结：2026 年的性能分水岭

在 Impeller 时代，我们不再需要折腾 SkSL 这种引擎层的机制，因为那已经不是我们能控制的范畴了。

我们需要关注的是如何通过代码减少对 Raster 线程的压力。

性能维度	Skia 时代 (旧经验)	Impeller 时代 (新法则)	开发者任务
Shader 编译	核心痛点，需要预热	已解决	删掉所有的 SkSL 预热脚本
渲染器选择	可以手动切换	强制使用	接受现状，不要再折腾开关
离屏渲染	开销大	依然开销巨大	重中之重：干掉 saveLayer
绘制复杂度	主要是编译延迟	主要是网格细分与合成	简化 `Path`，避免大规模冗余绘制

一句话总结： Impeller 把"编译卡顿"从你的任务清单里划掉了，但也把你留下的"离屏渲染"和"复杂几何体"问题变得更加赤裸。别再对着 Skia 的遗留问题自嗨了，赶紧去检查你的 saveLayer 吧。

如果文章对您有所帮助, 请不吝点击关注一下我的微信公众号：FSA全栈行动, 这将是对我最大的激励. 公众号不仅有Android技术, 还有iOS, Python等文章, 可能有你想要了解的技能知识点哦~