【性能优化实战】都知道小程序 FMP 优化实录，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);}});

后记

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