前言

出于多端投放和开放生态的考虑，闲鱼开始接入整个阿里小程序体系。闲鱼在9月份迅速上线了第一个小程序鱼塘小程序，由于刚接触不熟悉小程序体系，整体性能上有比较大的优化空间，主要表现在以下问题：

小程序加载慢，低端 Android 机（Android vivo Y67）上首屏时间接近6s
滚动卡顿，在 iPhone 7P 上滚动帧率平均在 40fps 左右
滚动多屏数据之后 Tab 点击切换慢，在 iPhone 7P 上切换 Tab 等待时间 3-5 秒，瞬时帧率低于 30fps
小程序由于其逻辑和渲染分离的架构特点，除传统 H5 优化手段之外还有其他不同点。本篇文章主要分析小程序构架对渲染的影响，以及鱼塘小程序下具体优化手段。

小程序架构

在分析具体优化 Case 之前我们先看下小程序架构，先要了解架构才能清楚如何去优化具体的业务代码。阿里小程序采用支付宝小程序的架构，这里引用一张支付宝小程序页面生命周期图。

目前市场上所有小程序都采用逻辑（worker）和渲染（webview）分离的方式。这样带来的好处是：

能够满足对于外部应用管控的诉求，由于业务逻辑没有运行在 webview 上，所以无法通过浏览器的API直接操作渲染动作，意味着不能通过脚本做一些动态化操作。所有渲染相关操作都是通过 axml 来定义，外部应用进行更改都需要通过平台审核。
多个页面可以共享同一个 JS 运行环境，整个小程序生命周期可以共享全局应用上下文，接近 App 的开发体验。
页面渲染与业务逻辑分开执行，不会出现 JS 逻辑执行导致渲染卡住的情况，有利于提升整体渲染性能。

但是这样也会造成一个显而易见的问题，页面性能强依赖 webview 和 worker 的通信效率：

webview 和 worker 之间的通信是异步的。这意味着当我们调用 setData 时，数据变更不会立即体现到页面渲染上，而是需要从 worker 异步传输到 webview 。
数据传输时需要序列化为字符串，然后通过 evaluateJavascript 方式传输，数据大小会影响传输性能。

小程序逻辑和渲染分离的架构造成它与传统 H5 性能优化方式上的一些差异。小程序性能优化可以参考看下官方推荐的一些性能优化建议，简单来讲需要特别注意 setData 操作的频次和传输数据，接下来我们结合鱼塘小程序具体案例一块探讨下。

业务层优化

鱼塘小程序是一个类似兴趣圈子下的内容聚合场景，用户在这里可以无限加载浏览内容，还会点击 Tab 切换浏览不同维度的内容。我们需要重点考虑小程序加载流畅度、滚动顺滑度以及 Tab 点击切换时候界面响应速度。之前版本的鱼塘小程序在低端 Android 机（Android vivo Y67）上首屏时间接近6s，在 iPhone 7P 上滚动帧率平均在 34fps - 60fps，点击 Tab 切换瞬时帧率在 30fps 左右，下面针对几个具体 Case 讨论解决方案。

加载慢

『BEFORE』

『AFTER』

问题表现

从打开小程序到最终渲染出来经历了短暂的白屏

原因分析

加载整体耗时包括小程序容器初始化、数据请求以及请求结果返回到渲染，需要针对每个时期做优化

优化手段

引入小程序实例保活机制，降低小程序启动耗时
将数据请求提前至 page.onLoad 中，请求阶段加入闲鱼 Loading 提示，通过交互减少用户焦虑感
首屏数据离线化，在首屏数据到达前预渲染，在容器测请求提前至与小程序实例启动并行或更前
将首屏数据进行拆分，初始化只 setData 可见视图对应的数据

滚动卡顿

『BEFORE』

『AFTER』

问题表现

页面滚动掉帧感明显，粘手度低

原因分析

由于需要监听页面滚动距离触发顶部 Bar 显示，Page 层监听了 onScroll 事件，并在回调中频繁的调用 setData
加载下一页 Feeds 的请求回调中，解析数据时多次调用 setData
Feeds 卡片内部监听了组件的 onAppear 和 onDisappear 事件，并在回调中调用 setData，目的是为了不重复发送曝光埋点

优化手段

针对小程序 webview 和 worker 通信的机制，我们需要减少 setData 的调用频率与传输数据大小。

优化了 onScroll 回调逻辑，改为只有在部分时机（滚动距离在一定范围内）下才会触发 setData，且只做局部渲染
加载下一页 Feeds 的请求回调优化了数据解析逻辑，只调用一次 setData，并参考官方优化建议使用 $spliceData 渲染长列表
将 setData 的数据大小进行优化，只传输会影响视图的相关数据
不再监听组件 onAppear 和 onDisappear 事件，改为监听组件的 onFirstAppear 事件，只有第一次 Appear 的时候才执行曝光操作

Tab 切换响应慢

『BEFORE』

『AFTER』

问题表现

加载几页 Feeds 后，切换 Tab 开始出现明显卡顿，需等待 3-5 秒，部分 Android 机器上更为严重，偶尔会 Crash

原因分析

Tab 切换时在短时间内做了太多事情：切换 Tab Current 状态、销毁 Feeds 列表、展示 Loading 动画、发起数据请求 -> 渲染新列表，这样高并发大面积的内容更新导致小程序视图层数据消费阻塞，从而产生卡顿感。

优化手段

将 Tab 切换时的任务拆解开，分四个阶段进行：
- 切换 Tab Current 状态，执行 Tab 切换动画
- 在 Tab 切换动画完成后将页面滚动到 Tab 刚好 Sticky 住的位置
- 销毁 Feeds 列表，展示 Loading 动画
- 发起数据请求 -> 渲染
经过这样的拆解，将之前的『高并发大面积』转换成了『分阶段可控制』的更新方式，随之带来的就是界面上的流畅

容器层优化

小程序容器通过离线缓存、数据预加载、小程序保活等机制来优化整体性能。然而在富交互场景中，webview 上的控件渲染会遇到很多性能瓶颈，目前阿里小程序支持在 webview 中内嵌 native 组件来提升整体性能，鱼塘小程序中有大量视频内容场景，使用的 video 组件就是 native 原生组件。这类组件脱离 webview 线程之外渲染，但是由于是覆盖在 webview 之上，所以在 webview 内无论怎样修改 z-index 都无法将元素覆盖在原生组件之上。

为了解决这个问题，小程序框架同学又设计了 cover-view ，它可以覆盖在 native 组件之上，比如视频上方的播放按钮就可以用 cover-view 盖上去。最终线上鱼塘小程序通过同层渲染 video 组件之后用户侧体验有比较大的提升。

总结与展望

经过优化之后，目前线上鱼塘小程序相比之前版本有显著提升：

针对这个业务场景下的小程序依然有很多可以继续优化空间，例如我们将每个鱼塘实例化独自小程序，这样可以针对每个鱼塘小程序去进行保活等。此外在小程序性能优化相关上，我们认为可以在研发阶段提供一个包含性能告警的容器，通过监听 setData 的调用频率与传输数据大小，对开发者一些可能会影响性能的代码写法进行提示。未来我们会持续在闲鱼小程序生态建设上发力，整合集团研发资源建立闲鱼小程序研发全链路最佳实践，提供外部服务商入驻开发三方小程序的良好体验。

iPhone 11 Pro、卫衣、T恤等你来抽，马上来试试手气 https://www.aliyun.com/1111/2019/m-lottery?utm_content=g_1000083877

原文链接
本文为云栖社区原创内容，未经允许不得转载。

为何小程序上线了，他们的内心却留下遗憾？相关推荐

京东小程序上线，剑指何方？
小程序再添一家,这次入局的是电商巨头京东. 2020年4月22日,京东小程序开放平台正式上线.此举并非临时起意,早在去年的5月24日,京东就掏出300万元奖金,发起了小程序创新大赛.显而易见,京东在小 ...
有三AI小程序上线，把你的代码show给世界
文/编辑 | 言有三五一期间不发技术文影响大家休假,不过经过有三这几天的折腾,今天有三AI小程序上线了,虽然是很粗糙的一个版本,但是哆哆嗦嗦,勉勉强强地也能用了,给大家介绍一下,体验码如上. 为什么 ...
小程序上线7天，罗胖带着1000万用户跑了……
PMCAFF(www.pmcaff.com):互联网产品社区,是百度,腾讯,阿里等产品经理的学习交流平台.定期出品深度产品观察,互联产品研究首选. 观点:最热产品.最酷视角,产品人说产品才够味儿.本文 ...
微信小程序上线广告功能打造O2O闭环
6月16日开始,通过微信小程序入口搜索"酒店"."水果"等关键字时,会看到标注有"广告"字眼的第三方服务信息.来自微信内部的消息是,小程序关 ...
一次新公司注册与小程序上线的历程
因为2017年的一个外包项目经历,感觉到一块市场需求有运作的空间,和朋友A决定启动一个新的创业项目.本文详细记载整个项目从公司注册到小程序上线.再到项目运营的过程,根据项目进展不断更新.看官可以看戏的 ...
揭秘小程序上线不到一周，每天2万销售额，究竟怎么做到的？
上线不到一周的小程序每天2万销售额? 2017年流行的东西可不少.在互联网,小程序的声音不断扩大,而餐饮领域,一股「自热火锅」的风突然刮了起来."一杯凉水吃火锅"的口号,直击众吃货 ...
微信群打卡小程序_微信打卡小程序上线，你会用吗？
原标题:微信打卡小程序上线,你会用吗? 对于微信,这是大家都比较熟悉的东西,尤其是在当前,旗下用户量可以说达到了数亿的人脉.对此不少商家都很关注这个,尤其是该平台推出的小程序出现,更让很多企业为此受益 ...
小程序源码：(自营)独家最新款带部分采集功能壁纸/头像/动态壁纸小程序上线超炫裂变超强支持投稿+视频教程
新款壁纸表情包头像小程序(dcloud云开发) 支持微信QQ双端小程序也就是说可以打包成微信小程序也可以打包成QQ小程序相当于一码二用,非常划算无需授权,源码全开源,支持二开无需服务器.无需域名 ...
从零开始实现微信小程序上线发布流程
微信小程序上线发布流程第一步:运行项目用微信开发者工具打开第二步:确认一下是否是线上地址,appId是否有误,文件大小有无超出 2M(2048KB) 超出需要分包处理,或者查看是否存在大量本地图片 ...
微信小程序过审:怎么绕过微信小程序上线审核,并且不影响正常用户使用，有用记得点赞哈
怎么绕过微信小程序上线审核(不好用回来吐槽我) 怎么绕过微信小程序上线审核(不好用回来吐槽我) 前言方案一方案二(推荐) 代码前言很多开发者在开发项目的时候发现上线微信小程序最难的不是开发阶段 ...

为何小程序上线了，他们的内心却留下遗憾？

前言

小程序架构

业务层优化

加载慢

问题表现

原因分析

优化手段

滚动卡顿

问题表现

原因分析

优化手段

Tab 切换响应慢

问题表现

原因分析

优化手段

容器层优化

总结与展望

为何小程序上线了，他们的内心却留下遗憾？相关推荐

最新文章

热门文章