每次发布前,都会跑同一套浏览器测试。下面是 1.x 版本的 Fabric.js 兼容性和性能情况。
支持的环境
| 1.x 支持 | |
|---|---|
| Fabric.js | 6.x 和 7.x |
| 浏览器 | 当前版本的 Chromium、Firefox 和 WebKit(Safari),每次发布都测试 |
| React | 18 和 19,通过 fabricjs-document-engine/react |
| Node.js | Fabric.js 6 需要 18+,Fabric.js 7 需要 20+。导入、校验、迁移、安全检查和存储适配器都能用;画布相关功能需要浏览器 |
测试结果
| Chromium | Firefox | WebKit(Safari 引擎) | Node | |
|---|---|---|---|---|
| Fabric.js 7.4 | 全部通过 | 全部通过 | 全部通过 | 导入、校验和迁移通过 |
| Fabric.js 6.9 | 全部通过 | 未单独运行 | 未单独运行 | 导入、校验和迁移通过 |
- 浏览器测试覆盖 id、保存和加载、历史记录、安全保存、资源和字体、基于 IndexedDB 的恢复、导出、版本、迁移、React、取消、自定义对象和安全限制。
- Fabric.js 6 和 Fabric.js 7 的默认原点不同。文档总是保存
originX和originY,所以用一个版本保存的文件,在另一个版本里也能正确打开。 - WebKit 无法在 IndexedDB 中存储
Blob。恢复副本把图片数据存为字节,所以在 Safari 里恢复也能用。
性能
使用 5,000 个对象测量(60% 矩形、20% 圆形、10% 文本框、10% 编组),列出最慢浏览器的结果。
| 步骤 | 目标 | 最慢实测 |
|---|---|---|
| 移动后记录一步撤销 | 50 ms | 27 ms |
| 用事务修改一个对象的样式 | 50 ms | 29 ms |
| 撤销一步 | 50 ms | 28 ms |
| 保存到内存存储 | 50 ms | 29 ms |
| 加载一份文档 | 1,000 ms | 828 ms |
| 导出前的检查 | 50 ms | 22 ms |
导出耗时几乎全部来自 Fabric.js 自身的渲染和浏览器的图片编码。每个浏览器都会跑一个 2,000 对象的回归测试,性能明显下降时构建就会失败。
内存
- 默认情况下,撤销最多保留 100 步、64 MB 对象数据。每一步只存改动过的对象。
- 每份文档只保留一份恢复副本,保存覆盖所有改动后即删除。
- 导入的文档最多 50,000 个对象、嵌套 100 层。
各浏览器的完整数据见 GitHub 上的兼容性结果。1.x 的 Fabric.js 兼容性承诺总结在版本发布页面。