小程序setdata优化_小程序页面加载性能优化

6月份有幸被前端早读课邀请到厦门大前端技术沙龙，作了小程序页面加载性能优化的分享。从现场反响来看，大家对性能优化的关注度都很高，还是很开心的。

本文是分享的文字版，总结了我们上半年对榛果小程序性能优化的研究和一些实践，希望各位读者能够对小程序的性能优化有个系统的了解。

小程序出现的问题及优化方案

大家在开发和使用小程序的时候，是否有遇到这两个问题？

问题一，页面的加载时间过长：当页面在跳转时，有较长的白屏时间或“加载中”的状态；

问题二，页面失去响应：页面在滑动过程中出现卡顿，或按钮点击后失去响应；

本文将围绕这两个问题的解决思路进行展开。

问题一 加载时间过长

新页面在加载过程中除了要创建页面实例初始化等工作，更多时间还花在页面数据的请求上。所以针对数据请求，我们提出了三种优化思路：请求前置：提前请求数据，缩短页面加载时间；

首屏直出：请求前，利用已有数据，跳过“页面加载”的过程；

数据缓存：请求后，缓存接口请求的数据；

优化思路一 请求前置

我们一般会在新页面加载完成的onLoad事件中请求数据，那我们可不可以考虑提前请求的时机？在回答这个问题前，我们需要先了解一下小程序的运行机制和生命周期。

小程序MINA框架

小程序整体框架分为三个层，视图层、逻辑层和系统层。视图层包含了小程序各个页面的WXML、WXS和WXSS。逻辑层则运行在JavaScript执行引擎中，包含处理数据逻辑和封装客户端提供的API。系统层则提供微信客户端原生的能力。除了微信原生功能支持、网络请求等，还提供视图层和逻辑层之间数据传输与事件通知的功能。

逻辑层将数据变化通知给视图层，触发页面更新；视图层把触发的事件通知给逻辑层，进行业务处理。可以看出，视图层的变化实际上是由数据驱动的，小程序将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层，这中间需要系统层做中转传输。

根据小程序框架，我们了解视图渲染与逻辑执行是并行独立的线程，因此我们可以一边做页面过渡，一边向后端请求数据，这样并行做请求与渲染。那么，问题又来了，我们应该把数据请求触发点应该提前到那里呢？可以小程序页面加载的生命周期中找到一些思路。

生命周期