Flutter   发布时间:2022-05-03  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Flutter瘦内存瘦包之图片组件大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

背景

在电商类APP里,图片到现在为止仍然是最重要的信息承载媒介,不得不说逛淘宝的过程,其实就是一个图片的过程。而商品详情页中的图片,通常是页面中内存占用最多的内容,占用了整个页面内存的超过 50%。
闲鱼在Flutter化的过程中,选择了商品详情页作为第一个落地的场景。通过多版本的迭代完善,基于Flutter的详情页已经在闲鱼稳定运行。然而正因为详情页的图片量大,导致Flutter里图片相关的问题一直挥之不去。

1:内存问题       ---   连续push Flutter界面内存累积

2:安装包问题    ---   过渡时期两份重复资源文件

3:寻址缓存问题 ---   原有的寻址缓存策略无法复用。

4:图片复用问题 ---   Native和Flutter重复下载相同图片

解决方案----FXTexImage_V1

为了解决这些问题,我们尝试着寻找一种新的思路,一种能够将Flutter与native串联起来的思路。而之前做视频播放器的方案给了我们启发。

熟悉Flutter的同学应该都知道,Flutter的视频组件是基于一个Flutter提供的一个叫“外接纹理”的技术实现的,关于Flutter外接纹理,本人另外有一篇文章有更详细的论述,这里不再赘述
https://mp.weixin.qq.com/s/KkCsBvnRayvpXdI35J3fnw

我们将每一张图片假想成一个:静态的视频。图片内容一个external_texture来负责显示,而这个external_texture则由native端提供具体的渲染数据。

image.png

通过这种方案,我们便可以通过external_texture这座桥梁,将Flutter作为native端图片一个最终展示场所。而所有的下载、缓存、裁剪等逻辑都可以复用原来的native图片库。

基于这个基本框架,我们形成了我们第一版本的图片渲染组件:FXTexImage----V1。这个组件很好的解决Flutter引入的安装包、图片缓存、图片复用等问题。

但是图片最大的问题:内存问题,并没有得到解决

内存优化----FXTexImage_V2

为了用户体验,通常会有连续push若干个界面的场景(比如闲鱼的详情页,点击底部的推荐列表,可以一直往下push新的详情页),这种场景下,每一个界面都有大量的图片展示。所以在引入Flutter以后,闲鱼在iPhone 6P等机型上通常只能push10个左右详情页就挂了。

虑到在显示过程中,真正用户可见的页面,其实只有当前栈顶的两个页面,基于这个特征我们就做了优化逻辑:

1:在push详情页过程中,我们只保留了当前展示页和当前页的前一页的图片资源,而之前的资源全部都做了释放(只是图片资源的释放,整个页面还有页面中的其他元素还是做了保留)。

2:为了做到用户无感知,我们在pop过程中,会预先去加载当前界面下一个界面的图片资源。

插图2.png

通过这种方式,理论上我们可以释放掉不可见的资源,从而保证在持续Push界面过程中内存缓慢增长,但是实践过程中发现内存仍然持续增长。

经过排查,我们发现Flutter 1.0版本以及0.8.2版本里,SurfaCETextureRegistry提供了release方法,这里将会把创建的SurfaCETexture进行释放。然而测试过程中发现,单单对SurfaCETexture释放,并没有完全释放内存,当反复创建对象时仍然会闪退。为此,我们在AndroidExternalTextureGL的析构函数增加了纹理的释放gldeleteTextures逻辑。

然而,AndroidExternalTextureGL的析构是在Flutter的GPU线程@L_801_67@的,而external_texture的release方法通常是在主线程,也就是PlatForm线程@L_801_67@的。不同线程@L_801_67@的问题就是会导致一个诡异的问题:

插图3.png

推测是不同线程释放的逻辑影响了GL环境,导致文字渲染出了问题

所以,为了解决该问题,我们删除了SurfaCETextureRegistry的release方法里面SufaCETexture的释放逻辑,并且将SurfaCETexture的释放,放到AndroidExternalTextureGL析构阶段,通过Jni@L_801_67@java方法实现资源释放。

AndroidExternalTextureGL::~AndroidExternalTextureGL(){   if (state_ == AttachmentState::attached) {
      Detach();      if (texture_name_ != 0)
      {
          gldeleteTextures(1, &texture_name_);
          texture_name_ = 0;
      }
    }
   Release();
   state_ = AttachmentState::detached;
}
void AndroidExternalTextureGL::release() {
    jnienv* env = fml::jni::AttachCurrentThread();
    fml::jni::ScopedJavaLocalRef<jobject> surfaCETexture =
    surface_texture_.get(env);    if (!surfaCETexture.is_null()) {
        SurfaCETextureRelease(env, surfaCETexture.obj());
    }
}
void SurfaCETextureRelease(jnienv* env, jobject obj) {
   env->CallVoidMethod(obj, g_release_method);
   FML_checK(checkException(env));
}
  g_release_method = env->getmethodID(g_surface_texture_class->obj(), "release", "()V");

cpu优化----FXTexImage_V3

通过外界纹理渲染图片+不可见页面资源释放,我们解决了上述提出的一系列问题,但是又引入了新的问题:cpu偏高,滑动帧率偏低。通过测试,在详情页滑动过程中,IOS和Android的cpu都比Flutter原生组件高10%以上,这个显然无法应用。

经过排查,发现cpu高的原因是:

IOS端: iOS的IOSExternalTextureGL模型是一个拉数据的模型,native端register一个CVPixelBuffer的生产者,当需要绘制时,都会@L_801_67@一次这个生产者的copyPixelbuffer方法去拉一次数据。然后将拉到的CVPixelBuffer对象转换成GPU Texture。这里每一次转换都换造成cpu较大开销。

并且这种拉数据的机制就要求这个生产者的必须一直保留着这个CVPixelBuffer对象(否则界面重刷以后,图片区域就显示白屏)。

Android端: android 的数据存储在SurfaCETexture中。每一次external_texture  layer需要绘制时候都会从SurfaCETexture中去update 数据到纹理中,由于SurfaCETexture使用基于EGLImage共享内存,所以然没有双份内存的问题,但是每一次update 都会带来较大的cpu开销。

在之前外接纹理的文章中,我们提出了一种新的基于共享上下文的外接纹理方案。并在我们视频的拍摄和编辑中得到了很好的应用。该方案当初提出来,是为了解决视频数据从cpu -> GPU -> cpu -> GPU 输送的问题而提出来的。

但是在图片这个场景下, 新的外接纹理方案下,一张图片在Native端加载完成以后,立刻被转换成一个OpenGL的Texture,然后图片的资源马上被释放。当界面刷新时,对于同一张图片的重新渲染,IOSExternalTextureGL不需要再去做将数据(CVPixelBuffer或者SurfaCETexturE)转换到Texture的逻辑,而是直接使用之前创建好的Texture。

经过这一步优化,我们很好的限制了iOS的cpu和内存,Android的cpu

通过测试对比,V3版本的图片组件,相比于Flutter原生图片组件,在详情页正常滑动操作过程中,平均cpu高出3%左右,然仍差于原生组件,单相对是可以接受的。

结果

内存:   基于新图片组件,我们很好的限制住了连续push 下的内存增长速度,顺利的将iPhone 6P上的详情页push 最大数量从10个增加到了30个以上

在同一线上版本中,我们通过控制ABTest开关,测试新的图片渲染方案和Flutter自带图片组件方案的Abort率,发现图片组件下闲鱼的Abort率降低20%

安装包: 新组件下,所有的资源组件与原来native资源共用,所有Flutter期间新引入的资源出了@R_419_2253@,全部删除减少安装包900k+。并且后续可以不用继续新增

寻址策略:  复用native图片组件,基于阿里系自己的图片下载组件,这样可以做到随着集团组件升级版本,兼容版本过程中各种新的寻址方式和图片格式。

图片复用:复用native图片组件,当图片地址命中缓存,可直接缓存加载,尺寸不一致时可以预先返回缓存图同时加载大图,这样大大增强详情页大图预览的浏览体验。

遗留问题

图片组件已经在闲鱼上全量部署,然而还是有一些问题没有得到很好的解决,上文提到过cpu比原生图片组件高3%左右,用户没有感官体验,但是还是有优化空间。

还有就是Flutter针对ExternalTexture的纹理渲染时没有开启抗锯齿,导致小图在大区域渲染时比原生组件效果要差。这里还需要继续排查原因。

最后,FXTexImage组件还在持续优化中,当解决上述遗留问题以后便会在Github上开源。

作者:闲鱼技术-炉军

大佬总结

以上是大佬教程为你收集整理的Flutter瘦内存瘦包之图片组件全部内容,希望文章能够帮你解决Flutter瘦内存瘦包之图片组件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。