7.2 小程序性能优化 - 极致性能实践

负责小程序性能优化工作，通过setData优化将页面渲染时间从800ms降至150ms，提升81%。
实现虚拟列表技术处理万级长列表，滑动帧率从35fps提升至58fps，内存占用减少75%。配
置分包预下载策略，二级页面打开速度提升60%。开发骨架屏与占位方案，用户感知等待时
间缩短45%。通过代码分离、图片压缩、无用代码清理等手段，包体积从8.5MB优化至
5.2MB，审核通过率提升至100%。监控平台显示页面FPS稳定在55+，白屏率降低70%。

主导小程序性能优化体系建设，建立从数据更新、渲染、网络到存储的全方位优化方案。深
入研究setData机制，通过数据diff、批量更新、局部更新等技术将单次setData耗时控制在
50ms以内。封装虚拟滚动组件支持动态高度和复杂场景，解决长列表性能瓶颈。设计智能
预加载策略，根据用户行为预测并提前下载分包，页面跳转接近零等待。实现多层级骨架屏
方案，从页面级到组件级全覆盖。建立包体积监控告警机制，每次提交自动检测体积变化。

作为性能优化负责人，推动小程序体验全面升级，核心指标显著改善。通过性能优化使页面
加载速度提升65%，用户留存率增长18个百分点。长列表优化后，商品浏览深度从平均3.2
页提升至5.8页，转化率提升22%。分包预下载使二级页面秒开率从45%提升至90%，跳出率
下降35%。包体积优化使首次下载时间缩短40%，新用户转化率提升12%。建立性能监控体系，
实时追踪核心指标，性能劣化发现率100%。优化成果获得年度技术创新奖。

小程序的setData是个大坑，用不好很容易卡顿。我们项目一开始就遇到这个问题，商品列
表滑动很卡，查了下发现每次setData要800ms，这肯定不行。

我做了几个优化：

第一是减少setData频率。原来是数据一变就setData，scroll事件里每次都调，一秒触发
几十次。我改成用throttle节流，100ms最多调一次。还有一些不影响视图的数据，比如临
时变量，就不放data里了，直接挂this上。

第二是减少setData数据量。原来是整个列表数据都setData，有几百条数据，对象很大。我
改成只setData变化的数据，用数组下标定位：setData({ ['list[5].price']: 99 })，只
更新第5项的price字段，其他数据不变。

第三是合并setData。有些场景需要连续更新多个字段，原来是分开调setData，每次都触发
渲染。我改成先收集所有变化，最后一次性setData。用个临时对象缓存变化，在
requestAnimationFrame里统一提交。

第四是后台态不setData。页面切到后台，用户看不到，就不需要更新视图了。我监听
onHide，标记page._isVisible = false，setData前判断这个标志，后台态直接return。

第五是分批setData。有些数据特别大，比如商品详情的图文介绍，几十KB的HTML。我把它
拆成多段，先setData必要字段让页面能显示，然后用setTimeout分批setData详细内容，
避免一次性传输太多数据阻塞渲染。

这些优化做完，单次setData从800ms降到150ms，页面滑动很流畅，帧率从35fps提升到
58fps。用户反馈说不卡了，体验好多了。

还有个技巧是用WXS。一些简单的数据处理和渲染逻辑，比如格式化时间、计算折扣，可以
写在WXS里，直接在视图层执行，不用通过setData传数据，性能更好。