Web 版渲染器——HTML vs CanvasKit 选错了会卡顿或布局错乱

两种渲染器简介

怎么切换

设置 → 通用设置 → Web 渲染器，三个选项：

• HTML
• CanvasKit
• Auto（自动，由 Flutter 引擎判断）

修改后需要刷新页面（F5 或 Ctrl+R）才能生效——设置保存不会热切换。

各场景推荐

桌面端 Chrome / Edge / Firefox

• 推荐 CanvasKit（效果最好）
• 如果你追求加载速度，也可以用 HTML

移动端浏览器（手机 Chrome / Safari）

• 推荐 HTML（CanvasKit 在移动端性能差，卡顿明显）
• 移动端本来就不推荐 Web 版（官方也说移动端 Web 不推荐）

网速慢的环境

• 选 HTML（下载体积小，加载快）

需要 Laplace 编队截图功能

• 必须用 CanvasKit（HTML 渲染器不支持应用内截图）
• 页面 → Laplace → 编队配置 → 右上角相机图标（保存截图）

常见问题

问题一：Web 版卡顿

解决：

• 如果当前是 CanvasKit → 切换到 HTML
• 如果当前是 HTML → 尝试清理浏览器缓存、关闭其他标签页

问题二：字体不渲染（显示方框）

解决：

• 这是 CanvasKit 的已知问题——Google Fonts 下载后可能需要几秒才渲染
• 或浏览器阻止了 Google Fonts 的加载（隐私 / 广告拦截插件）
• 最快的解决办法：切换到 HTML 渲染器（HTML 用系统字体，不受 Google Fonts 影响）

问题三：页面布局错乱

解决：

• 如果当前是 HTML → 切换到 CanvasKit
• HTML 渲染器的字体计算偶尔不准，导致布局错位。CanvasKit 不会有这个问题

问题四：应用内截图不工作

解决：

• 只有 CanvasKit 支持
• HTML 渲染器下"保存截图"按钮不可用（或点击没反应）
• 切换到 CanvasKit → 刷新页面 → 再试

问题五：Auto 选项选了什么

Flutter 引擎在 Auto 模式下的判断逻辑是：

• 桌面端 Chrome / Edge / Firefox → CanvasKit（性能好）
• 移动端浏览器 → HTML（性能有限）
• Safari 桌面端 → 有时选 HTML（视 Flutter 版本而定）

Auto 是推荐选项——大部分情况下选对了。但如果遇到上面的问题，手动指定更靠谱。

总结