iOS项目SVG与PDF渲染性能测试及矢量图适用性疑问

我们在iOS项目中曾使用SVG作为资源，发现它不仅导致应用体积大幅增加，还使应用运行变慢（滚动时出现闪烁）。

不同图片格式的渲染性能测试结果 #

我们对比了PNG、SVG、PDF、HEIC的渲染性能，测试数据如下：

• 201ms - 保留矢量数据的SVG（极端场景下达1534ms!!）
• 4ms - 不保留矢量数据的SVG
• 215ms - 保留矢量数据的PDF
• 4ms - 不保留矢量数据的PDF
• 5ms - 高分辨率PNG
• 96ms - HEIC（此结果异常，其他资源测试为5ms）

测试代码 #

let frame = CGRect(x: 0, y: 0, width: 500, height: 500)
let start = CFAbsoluteTimeGetCurrent()
(0..<10).forEach { _ in
    UIImage(named: imageName)!.draw(in: frame)
}
let diff = CFAbsoluteTimeGetCurrent() - start
print("TIME: \(Int(diff * 1000))ms - \(imageName)")

现有优化效果 #

最终我们改用PNG，性能提升约40倍；经ImageOptim优化后，Assets.car体积从5MB降至1MB。

疑问解答 #

iOS中使用矢量图是否仍有意义？ #

矢量图在iOS中并非毫无价值，适合以下场景：

• 需要超大尺寸展示的元素：比如大幅海报、支持动态缩放的界面组件，此时位图会因尺寸过大导致体积暴涨，矢量图的体积优势能凸显；
• 不频繁渲染的静态元素：比如设置页的小图标，仅加载一次且不会频繁重绘，性能损耗可忽略；
• 需要动态修改样式的元素：比如通过代码调整矢量图的颜色、路径形状，这种可编辑性是位图不具备的。

但如果是滚动列表、频繁重绘的场景，矢量图的性能劣势会被放大，优先选用位图更合适。

测试是否合理，有无遗漏点？ #

你的测试通过重复调用draw(in:)，能有效模拟频繁渲染的场景（比如列表滚动），但还有几个可补充的测试维度：

• 设备与系统版本差异：不同iOS版本、不同A系列芯片对矢量渲染的优化程度不同，可在多台设备上验证结果；
• 矢量图复杂度：渲染耗时和矢量图的路径复杂度强相关，你测试的SVG/PDF可能复杂度较高，可加入简单矢量图对比性能；
• 加载阶段性能：当前测试仅覆盖渲染耗时，可补充测试图片从Assets加载到内存的耗时；
• 真实场景模拟：直接在UITableView/UICollectionView中使用这些图片，测试滚动帧率，比单纯调用draw(in:)更贴近实际使用场景；
• HEIC异常排查：HEIC的异常结果可检查图片是否损坏、是否开启硬件加速，正常情况下HEIC的渲染性能应该和PNG接近。

内容的提问来源于stack exchange，提问作者ernewston