写点什么

【性能优化实战】都知道小程序 FMP 优化实录,android 音视频开发何俊林

用户头像
Android架构
关注
发布于: 刚刚

优化成果

该优化版于 2020 年 8 月 4 日上午 11 点左右全量上线,在手百中逐步放量。 FMP 指标在 8 月 5 日和 6 日两天快速下降,7 日逐步稳定。总计优化 FMP 指标 540ms 。



从数据表现来看,优化效果非常明显。


并且,问答页作为宝宝知道小程序 pv 最大的落地页,占据总 pv 的 60% 左右,另外还有 40% 的其他页面需要我们持续优化,未来数据表现还有不小的优化空间。

工具建设

工欲善其事必先利其器。后续我们还需要优化其他入口页面的性能,以及为后续开发高性能页面做持续的技术储备,所以我们将开发中遇到的和性能有关的问题做了一些抽象,通过打造基础操作的工具类库,从底层上来解决或者规避问题。


上文中有提到,同时发起多个 setData 操作,极易造成小程序渲染线程的拥塞,导致渲染效率受到影响,降低小程序内容上屏的效率。实际开发中,我们如果要避免同时发起多个 setData ,必然会带来额外的逻辑思考成本和代码结构调整的成本,也容易因为调整,降低代码的可读性和可维护性。为了兼顾渲染性能的需要和代码结构的可读性,以及代码观感,我们专门设计了一个内容渲染任务管理器。


DataSetter


DataSetter 目前已经集成在团队内部的小程序工程脚手架中,通过 AdvancedPage 创建的小程序 Page 实例,即可支持通过该管理器开放的 api 接口,向小程序的渲染线程提交数据渲染任务。


DataSetter 将小程序 setData 操作封装为一个队列式的渲染任务管理器,使用 DataSetter 进行 set 数据操作,可以使得单位时间内只有一个 setData 操作被执行,而其他被同时 set 的数据,将在队列中排队依次执行。


图例:优化前同时 setData ,会导致小程序渲染线程的拥塞



图例:优化后同时 set ,DataSetter 会整体管理数据渲染任务,不会造成渲染线程拥塞



为了支持分屏式渲染策略的编写,DataSetter 的 API 被设计为链式调用式设计。可以以非嵌套的方式编写 N 阶段内容渲染逻辑,代码行文清晰易懂。


this.$dataSetter.set({// 第一阶段渲染数据 status:'success',aaa:111}).done(e => {// 第一阶段渲染完成 console.log('第一阶段渲染完成');}).set({// 第二阶段渲染数据 bbb:222}).set({// 第三阶段渲染数据 ccc:333}).done(e => {// 第三阶段渲染完成 console.log('第三阶段渲染完成‘);});

DataSetter 源码

/**


  • @name DataSetter

  • @description setData 语法增强,支持链式调用和队列式 set 数据,一次 setData 成功之后才开始下一次 setData*/class DataSetter {queue = [];

  • context = null;

  • index = 0;

  • constructor(context) {this.context = context;}

  • set(dataset = {}) {this.queue.push({dataset, callback: null});if (this.queue.length === 1) {this.exec();}return this;}

  • done(callback) {this.queue[this.queue.length - 1].callback = callback;return this;}

  • exec() {let task = this.queue[this.index];if (!task) {// console.log('all task done!');this.refresh();return;}

  • const next = () => {// console.log(set data ${this.index} ok!);task.callback && task.callback();this.index++;this.exec();};// 如果当前任务 dataset 为空,则不调用原生 setData,直接执行回调 if (!task.dataset || Object.keys(task.dataset).length < 1) {next();return;


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


}// console.log(set data ${this.index});this.context.setData(task.dataset, next);}


refresh() {this.queue = [];this.index = 0;}}


// Page Demo


Page({dataSetter: null,onLoad() {this.dataSetter = new DataSetter(this);}});

后记

造成小程序性能不理想的情况有很多,而渲染问题的解决和优化是可以带来最大收益的,并且如果能根据实际的业务场景,来灵活设计视图的渲染策略,往往可以带来奇效。渲染问题优化是一件非常精细的事情,尤其是面对逐渐复杂的业务代码,敢于去改造尝试,才是最终成功的起点。

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
【性能优化实战】都知道小程序FMP优化实录,android音视频开发何俊林