本文介绍了针对小程序问答页的性能优化实践，通过实施分屏式内容渲染策略，显著提升了FMP指标，减少了页面加载时间。优化后的页面分为四个渲染阶段，保证了核心内容的快速展示，并通过DataSetter工具类管理setData操作，避免渲染线程拥塞，提高渲染效率。
优化前的问答页数据渲染示意图
优化之前，页面加载完数据之后的首次渲染，会一次提交问题区、回答区、广告组件区三个部分的渲染任务，由于这三个区域涉及的内容量比较大，基本都会超过一屏，甚至两屏以上，另外各个区域也都包含一些图文内容，加上本身耗时较高的广告组件。整体页面内容渲染速度很差。并且，因为存在直播信息横条等单独异步请求加载的数据内容渲染，也容易造成 setData 操作在小程序渲染线程中拥塞现象的发生。
所以，从小程序 FMP 的统计规则来看，目前的数据渲染逻辑，显然并不是最优的。
既然 FMP 主要统计的是用户第一眼可以看到的首屏位置内容，那么我们是不是可以换个思路来完成我们的内容渲染工作。
在确保数据接口性能已经符合常规标准的情况下，我们可以使用更聪明的渲染策略。
优化方案
为了解决上述问题，我们构思了一套分屏式内容渲染策略，意在让用户能最快速度的先看到一部分关键内容，再分阶段渲染剩下需要被渲染的数据，而那些不需要被自动渲染的数据，可以改成由用户某种行为（比如滑动页面）触发加载和渲染。
优化后的问答页渲染示意图
PS：广告组件本身为异步组件，第二次 setData
最低0.47元/天 解锁文章
380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
