微信小程序性能优化

小程序优化

首屏加载优化

首屏加载优化的基本思路就是提升微信小程序加载首页资源的速度。资源分为静态资源 和动态资源。
优化静态资源就是减少静态资源体积；优化动态资源就是调整请求顺序让主要的内容在其他次要的内容显示之前显示，另外还可以与后端协调，提高请求本身的速度。

1. 删除无用代码、资源文件

2. 开启按需加载组件

   // app.json
   
   {
      "lazyCodeLoading":"requireComponents"
   }
   
   

3. 分包
   分包用于减少主包的体积，小程序的整体的加载速度就快，那么进入首页的速度也就快了。

   // app.json
   
   {
     "pages": [
       "pages/index/index",
       "pages/mine/index"
     ],
     "subpackages":[{
         "root":"pages/xxx",
         "pages":[
             "pages/xxx/xxx"
         ]
     }]
   }
   
   

4. 初始渲染缓存
   初始渲染缓存是在页面第一次被打开时把渲染的结果缓存到持久化的缓存区域中，当第二次进入缓存过得页面时就从缓存区域中取出已经缓存的数据。

   // app.json 或 页面的 json 文件
   {
       "window":{
           "initialRenderingCache": "static"
   	}
   
   }
   
   

5. 提前请求数据
   在onLoad或更早发起请求，这样不会在页面渲染的过程中由于数据的变化导致多次渲染页面。

6. 使用本地缓存
   使用本地缓存主要是减少获取数据的时间，从而减少逻辑层初始化的时间，进而提高页面加载速度。

白屏优化

1. 使用骨架屏
   在微信开发者工具模拟器的右下角 … ，点击后出现 生成骨架屏 选项
2. 使用占位图片或者使用css样式模拟占位图片
3. 懒加载
4. 使用Gzip压缩
   在请求头headers中配置"Accept-Encoding": "gzip, deflate, br"
5. 避免滥用image的widthFIt/heightFix模式

运行时性能

渲染性能优化

1. 减少Page构造时传入的自定义数据量
2. 减少WXML节点数量和层级

页面切换优化

1. 避免在onHide/onUnload中执行耗时操作

2. 控制预加载下个页面的时机

   // app.json
   // static:默认值，在onReady触发后200ms触发
   // auto：渲染线程空闲时间预加载
   // manual：开发者调用wx.prelaodWebview触发
   {
       "window":{
           "handleWebviewPrelaod":"auto"
       }
   }