Flutter 性能优化之Native 系列(二): Flutter 与 Go 图片压缩性能测试

前言

上一篇文章 介绍 Flutter 与 Go 互相调用的基础,并提出用 Flutter 实现跨平台的UI和交互,用 Go 替代 C\C++ 来访问底层设备或做 CPU 密集计算。

针对这一想法,对 Go 做底层计算做性能测试,以展示 Go 语言优秀的生态和底层计算能力。

目标

图片压缩是客户端开发中经常需要用的功能,并且也是非常消耗资源的操作。由于通常压缩图片只是一两张,所以对资源消耗关注的不多。但如果在业务中,有同时大量的图片做压缩操作时,那不得不面对性能优化的问题。

图片压缩在 Flutter 端有很多dart的实现,或者借助 flutter channel 与原生系统通信,并借用原生系统的实现。

本文展示的是 Go 实现的图片压缩与 dart 原生实现图片压缩消耗时间的对比。

图像压缩实现

Go 实现图片压缩

基于 Go 优秀的生态,图片压缩功能有很多第三方库实现,这里用的是 resize

代码比较简单,就是调用第三方的库,传入输入输出路径即可。

golang 复制代码
//export CompressImage  
func CompressImage(inputPath string, outputPath string, width, height uint) *C.char {  
    out := toCString(outputPath)  
    inputFile, _ := os.Open(inputPath)  
    defer inputFile.Close()  
    img, _, _ := image.Decode(inputFile)  
    resizedImg := resize.Resize(width, height, img, resize.Bicubic)  
    outputFile, _ := os.Create(outputPath)  
    defer outputFile.Close()  
    jpeg.Encode(outputFile, resizedImg, nil)  
    return out  
}

按照上一篇文章的步骤,执行编译命令

shell 复制代码
go build -buildmode=c-shared -o libcompress_image.so

并复制 .so 文件和 .h 文件到指定目录,配置ffigen并生成dart对应的的 ffi 代码。

Flutter 原生实现

Flutter 端借用的是 flutter_luban 插件,它的使用方法更简单

dart 复制代码
Future<void> initPathByLuban() async {
  String path = (await getApplicationDocumentsDirectory()).path;
  var srcPath = "$path/1.jpeg";
  var destPath = await Luban.compressImage(CompressObject(imageFile: File(srcPath), path: path));
}

引入插件后,只需要调用 Luban.compressImage 即可。

测试

针对两种不同的实现,执行命令

shell 复制代码
 flutter run --release

基于 Golang 实现的动态库,实现图片压缩时

基于 flutter_luban 插件,实现图片压缩时

可见,同样14M左右的图片,压缩到150K左右时,基于 FFI 通道实现对比原生语言实现,耗时由4700毫秒减少至1300毫秒,至少减少耗时3秒左右。

虽然本文只测试了一个图片,并且只测试了一个平台的,测试的结果不够严谨。但几倍的耗时差距也可以看出,借用 Go 语言实现密集计算,是个很不错的选择。

并且由于 Go 支持多平台的交叉编译,我们用go实现的库,可以方便的扩展的 macOS、windows的平台,这也是 flutter channel 所不能比拟的。

相关推荐
01传说11 分钟前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
烛阴1 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化2 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月2 小时前
7月10号总结 (1)
前端·css·css3
天天扭码2 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder2 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang2 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子3 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z3 小时前
CSS揭秘:10.平行四边形
前端·css·css3