微信小程序性能优化

小程序优化

首屏加载优化

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"
       }
   }