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 所不能比拟的。

相关推荐
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
Piper蛋窝2 小时前
深入 Go 语言垃圾回收:从原理到内建类型 Slice、Map 的陷阱以及为何需要 strings.Builder
后端·go
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121384 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css