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

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

https://a.perfma.net/img/3110416
1月前
196923

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研发的我们是如何做到性能优化的?

 

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

分类:
标签:
请先登录,再评论

收藏

4周前

收藏!

1月前

为你推荐

美团FlutterWeb性能优化探索与实践
一、背景 1.1 关于FlutterWeb 时间回拨到 2018 年,Google 首次公开 FlutterWeb Beta 版,表露出要实现一份代码、多端运行的愿景。经过无数工程师两年多的努力,在今年年初(2021 年 3 月份),Flutter 2.0 正式对外发布,
Flutter混合栈路由实践与优化
导语  在 Flutter 和原生混合开发的场景里,路由是绕不开的一个话题。但业内的方案中仍存在内存异常,对官方底层的修改也需要不断踩坑。我们在项目实践中,抽离出了一套混合栈路由框架。对内存进行了进一步优化,清晰了对底层代码的修改,同时更易于 Flutter SDK 升级。 
腾讯MOO音乐关于Flutter的内存治理(上)
导语MOO 音乐是 TME 旗下的新锐音乐服务,其团队是公司内最早实践 Flutter 的先行者之一。本系列文章将提炼 MOO APP 开发中遇到的情况,就 Flutter 内存占用治理方面,分享日常开发的一些基本认知、注意要点、排查方法和优化方案。内存治理篇文章共分上、中、下三篇,本篇为上篇。
腾讯MOO音乐关于Flutter的内存优化策略(下)
MOO 音乐是 TME 旗下的新锐音乐服务,其团队是公司内最早实践 Flutter 的先行者之一。本系列文章将提炼 MOO APP 开发中遇到的情况,就 Flutter 内存占用治理方面,分享日常开发的一些基本认知、注意要点、排查方法和优化方案。前两期为大家介绍了Flutter的内存泄漏排查及内存
腾讯MOO音乐关于Flutter的内存泄漏的排查实战(中)
导言MOO 音乐是 TME 旗下的新锐音乐服务,其团队是公司内最早实践 Flutter 的先行者之一。本系列文章将提炼 MOO APP 开发中遇到的情况,就 Flutter 内存占用治理方面,分享日常开发的一些基本认知、注意要点、排查方法和优化方案。内存治理篇文章共分上、中、下三篇,本篇为中篇。
淘宝特价版Flutter研发模式下的页面性能优化实践
导语淘宝特价版是集团内应用Flutter技术场景比较多,且用户量一亿人以上的应用了。目前我们首页、详情、店铺、我的,看看短视频,及评价,设置等二级页面都在用Flutter技术搭建。我们发现使用Flutter经常会遇到性能问题。因为Flutter严格意义上仅是一种“UI渲染框架&rdq
HeapDump性能社区专题系列七:大厂前端敲门砖——Flutter的应用实践
HeapDump性能社区内容专题,打包知识一起学:系列一:了解数据库性能优化系列二:手把手教你了解OOM系列三:过年七天,天天向上系列四:后端面试必备问题集系列五:了解前端性能优化实践系列六:手把手教你玩转JVM性能调优 Flutter是Google开源的构建用户界面(
闲鱼直播—使用Flutter实现跨平台播放器开发实践
导言直播带货已成为近年来最热的“风口”,已成为电商升级的新突破口。闲鱼作为国内最大的二手交易平台市场,直播带货也成为推动成交的强烈需求。但是闲鱼直播原先接入外部提供的直播sdk,存在以下几个痛点问题:业务定制困难。接外部sdk都存在“改不动,不敢改”