Appearance
Flutter渲染图片时,会占用大量的内存,除了APP前端做好对应的方案,后端也需要进行对应的优化。造成这样的原因,是多个层面同时影响的结果。所以后端同学一定要了解。大尺寸和高分辨率的图片会占用更多的内存和存储空间。如果应用中使用大量的高分辨率图片,可能会导致内存占用增加,从而影响性能。
图片压缩,并在不同类型的接口中差异化返回
大尺寸和高分辨率的图片会占用更多的内存和存储空间。如果应用中使用大量的高分辨率图片,可能会导致内存占用增加,从而影响性能。所以,后端需要将图片进行压缩,降低图片的分辨率和尺寸,从而降低图片的占用空间。这种压缩并不是局限于保存图片,而是在不同的接口中也要返回不同的图片,在列表中,返回尽可能小的缩略图,在详情中同样使用被压缩的图片,只有必要时,让用户单独查看原图。
列表中使用经可能小的缩略图对内存占用优化是最明显的尤其是虚拟列表ListView
常见的自动化图片代理服务器
ImageProxy 是一种用于代理和处理图像的技术,通常用于在网络请求中获取并处理图像。它可以帮助优化图像加载和处理过程,提高应用的性能和用户体验。
以下是 ImageProxy 的一些典型用法和优势:
- 图像缩放和裁剪:使用 ImageProxy,可以在获取图像之后对其进行缩放和裁剪操作。这在需要在不同大小的容器中显示同一图像时非常有用,可以避免加载和存储不必要的高分辨率图像。
- 图像格式转换:如果图像需要在不同的场景中使用,可能需要转换成不同的格式,如将图像转换为 WebP 格式以减小文件大小。ImageProxy 可以方便地进行图像格式转换,以适应不同的需求。
- 图像加载和缓存:ImageProxy 可以用作图片加载的中间层,可以先从缓存中获取图片,如果缓存中没有,则从网络上获取图片。这样可以避免在网络加载图片时的卡顿,并减少网络请求的频率,提高性能和用户体验。
- 图像处理和特效:使用 ImageProxy,可以在图像加载或显示之前对图像进行特效处理或过滤。例如,可以应用模糊效果、加入水印,或根据场景调整亮度和对比度等操作。这样可以在不改变原始图像的情况下,为图像添加更多的样式和效果。
- 图像缓存和持久化:ImageProxy 可以配合缓存库(如 LRU Cache)一起使用,以实现图像的缓存和持久化。这样可以避免重复加载和解码图像,提高性能并减少网络请求。
ImageProxy 提供了一种灵活且可扩展的方式,用于代理和处理图像。它可以在图像加载、缓存、处理和转换等方面提供更多的控制和优化选择,有助于提高应用的性能并提供更好的用户体验。
你可以尝试这个项目,ImageProxy
bash
go install willnorris.com/go/imageproxy/cmd/imageproxy@latest
安装完成后,请确保将 $GOPATH/bin 添加到 $PATH 中,然后使用以下命令运行代理:
bash
imageproxy
这将在端口8080上启动代理,不进行缓存,并且没有允许的主机列表(意味着任何远程URL都可以被代理)。通过在浏览器中访问 http://localhost:8080/500/https://octodex.github.com/images/codercat.jpg 你应该可以看到一个500像素的方形程序员章鱼猫。此外,你可以用NGINX反向代理来暴露来供前端直接调用。