uni-app——uni-app性能优化

详见 uni-app官网

• 编译模式改为v3

• 避免使用大图

• 如果不是视图所需要的变量，可以不定义在 data 中，可在外部定义变量或直接挂载在vue实例上，以避免造成资源浪费（定义在 data 里面的数据每次变化时都会通知视图层重新渲染页面）

• 减少一次性渲染的节点数量， 如服务器一次返回100条数据，可分批加载，一次加载50条，500ms后进行下一次加载

• 减少组件数量、减少节点嵌套层级。（每个组件渲染时都会触发一次通信，太多组件就会阻塞通信）

• 避免视图层和逻辑层频繁进行通讯。

  比如：

  1、减少 scroll-view 组件的 scroll 事件监听、

  2、注意 onPageScroll 的使用，onPageScroll 进行监听时，视图层会频繁的向逻辑层发送数据、

  3、多使用css动画，而不是通过js的定时器操作界面做动画

• 优化页面切换动画

  1、延时渲染图片或复杂原生组件或分批渲染

  2、自定义动画效果

  3、App-nvue和H5，还支持页面预载

• 优化背景色闪白

  1、新页面进入时闪白

  - 如页面背景是深色， 原因是webview背景生效太慢，可将样式写在App.vue中。
  

  2、老页面进入时闪白

  • 老窗体会有一个半透明消失的效果。这个半透明效果的背景色，可以根据需要调节为暗色系。 在pages.json里globalStyle下或指定页面下，配置app-plus专属节点，然后配置animationAlphaBGColor属性

• 优化启动速度

  1、App端使用v3编译器，首页为nvue页面时，并设置为fast启动模式，此时App启动速度最快。

  2、App设置为纯nvue项目（manifest里设置app-plus下的renderer:“native”），这种项目的启动速度更快，2秒即可完成启动。

• 优化包的体积

  1、自定义es6转es5、css对齐的功能等编译功能是否开启

  2、开启摇树优化机制， 此优化机制需在manifest配置

  3、在 manifest.json-App模块权限去除不需要的模块权限

  4、App端支持如果选择纯nvue项目（manifest里设置app-plus下的renderer:“native”），包体积可以进一步减少2M左右

  5、App端在HBuilderX 2.7后，App端下掉了非v3的编译模式，包体积下降了3M。