性能文章>HeapDump性能社区专题系列七:大厂前端敲门砖——Flutter的应用实践>

HeapDump性能社区专题系列七:大厂前端敲门砖——Flutter的应用实践原创

https://a.perfma.net/img/3110416
5月前
226523

HeapDump性能社区内容专题,打包知识一起学:

系列一:了解数据库性能优化

系列二:手把手教你了解OOM

系列三:过年七天,天天向上

系列四:后端面试必备问题集

系列五:了解前端性能优化实践

系列六:手把手教你玩转JVM性能调优

 

Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,作为一个ios、androd和web兼容的开发平台,Flutter赢得了很多大厂前端工程师的喜爱,而掌握熟练的Flutter开发和优化技术也是进入阿里系、美团、携程、京东、腾讯等公司必不可少的敲门砖,本周的专题给大家带来的就是Flutter的应用实战,希望大家在阅读的同时多多思考!

 

Flutter在携程火车票的性能优化实战!

携程火车票在十余个核心业务的列表页及主流程大规模进行了Flutter实践。经过一年多的开发、维护 ,总结了一套行之有效的性能优化方案。本文主要介绍结合性能分析工具,来识别、区分、定位一些性能问题,并且能够找到具体的方法和代码位置,帮助更快地解决问题。此外,也会分享我们做的一些性能优化案例和体验上的优化,希望能够给你带来一些启发。

 

美团FlutterWeb性能优化探索与实践

美团外卖商家端以 App、PC 等多元化的形态为商家提供了订单管理、商品维护、顾客评价、外卖课堂等一系列服务,且 App、PC 双端业务功能基本对齐。同时还在 PC 上特供了针对连锁商家的多店管理功能。在 App 中,能够基于 FlutterNative 提供高性能的服务;在 PC 端和 Mobile 浏览器中,利用 FlutterWeb 做到了低成本适配,提升了产研的整体效率。

然而加载性能问题是 MTFlutterWeb 应用推广的最大障碍。本篇主要以美团外卖商家端为舞台为大家提供一个优化思路。

 

Flutter混合栈路由实践与优化

在 Flutter 和原生混合开发的场景里,路由是绕不开的一个话题。但业内的方案中仍存在内存异常,对官方底层的修改也需要不断踩坑。我们在项目实践中,抽离出了一套混合栈路由框架。对内存进行了进一步优化,清晰了对底层代码的修改,同时更易于 Flutter SDK 升级。

 

京东在Flutter加载大量图片导致的内存溢出的优化实践

随着Flutter稳定版本逐步迭代更新,京东APP内部的Flutter业务也日益增多,Flutter开发为我们提供了高效的开发环境、优秀的跨平台适配、丰富的功能组件及动画、接近原生的交互体验,但随之也带来了一些OOM问题,通过线上监控信息和Observatory工具结合分析我们发现问题的原因是由于Flutter页面中加载的大量图片导致的内存溢出,这也是在原生开发中常见的问题之一,Flutter官方为我们提供的Image widget实现图片加载及显示,只有了解Flutter中图片的加载原理及图片内存管理方式才能真正发现问题的本质,本文将重点介绍Flutter中图片的加载原理,使用过程中有哪些需要注意的地方及优化思路和手段,希望能给大家带来一些启发和帮助。

 

腾讯MOO音乐关于Flutter的内存治理(上)

腾讯MOO音乐关于Flutter的内存泄漏的排查实战(中)

腾讯MOO音乐关于Flutter的内存优化策略(下)

MOO 音乐是 TME 旗下的新锐音乐服务,其团队是公司内最早实践 Flutter 的先行者之一。本系列文章将提炼 MOO APP 开发中遇到的情况,就 Flutter 内存占用治理方面,分享日常开发的一些基本认知、注意要点、排查方法和优化方案。内存治理篇文章共分上、中、下三篇,本篇为中篇。

 

淘宝特价版Flutter研发模式下的页面性能优化实践

淘宝特价版是集团内应用Flutter技术场景比较多,且用户量一亿人以上的应用了。目前我们首页、详情、店铺、我的,看看短视频,及评价,设置等二级页面都在用Flutter技术搭建。因为Flutter严格意义上仅是一种“UI渲染框架”,它通过异步来来实现子线程渲染UI,并且通过Skia保证两端“渲染的一致性”。但子线程执行并渲染,且动态库打包这些策略并非“一片通吃”,会导致损耗页面打开性能及可交互时长的增加。试想,app启动时动态库加载的dynamic binding(影响启动时长),页面启动时主线程启动了页面,但ui渲染却需要等待Flutter的子线程执行并渲染,低端机上页面会短暂白屏(页面未渲染影响可交互时长,虽然fps欺骗性的提高了)。

Flutter有性能瓶颈,但重度使用Flutter研发的我们是如何做到性能优化的?

 

这次的分享就到这里了,如果有什么疑问可以在评论提出来~

点赞收藏
分类:标签:
堆堆

【HeapDump性能社区官方小编】各位堆友们,+微信号perfMa,可以联系上堆堆哦~

请先登录,查看2条精彩评论吧
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步

为你推荐

深入解析Flutter下一代渲染引擎Impeller

深入解析Flutter下一代渲染引擎Impeller

3
2