uniapp性能优化

为什么要性能优化

        uniapp项目的视图层和逻辑曾是分离开的；视图层负责进行页面渲染、逻辑层负责执行后端的业务逻辑，处理数据；视图层和逻辑层分离，减少了项目的耦合程度，并且逻辑层的运算不会影响到视图层的渲染，窗体动画会比较稳。

        缺点：两层相互通信会有损耗

1. 性能优化的建议

   1. 长列表优化
      1. 数据量过多导致项目加载会变得很慢可以使用 长列表差量数据更新 和 长列表无差量数据更新
      2. 长列表差量数据更新：如果长列表的数据有可能差量更新，则需要将长列表中的每个item都做成一个组件。不然其中一个item更新，都会造成长列表的重新加载，严重浪费系统资源
      3. 长列表的无差量数据更新：长列表的item不会单独去更新，就没有必要做成一个组件了，直接长列表循环显示item即可；组件在页面初始化时也会占用更多的内存，并且便利节点会更慢，每个组件渲染时都会触发一次通信，太多组件会阻塞通信；深层节点的嵌套也是如此，我们开发时要注意尽量避免深层嵌套。
   2. 减少一次性加载的节点数量
      1. 页面初始化时，逻辑层如果一次性向视图层传递很多数据，不仅会造成逻辑层和视图层之间的通讯变化，由于视图层一次渲染的数据过多，还会造成页面的卡顿
   3. 尽量避免两层的频繁通信
      1. 视图层和逻辑层频繁通信会造成通讯阻塞，影响项目的正常运行
   4. scroll-view组件的使用
      1. 尽量减少监听滚动事件，因为scroll-view的滚动事件时，视图层会频繁的向逻辑层发送数据
      2. 不要实时的改变scroll-top、scroll-left属性，可能造成通讯卡顿
      3. 如果要实现下拉刷新的功能，建议使用页面的滚动，而不是scroll-view
      4. 不要在scroll-view组件中放长列表，会导致性能问题
   5. 图片、动画加载问题
      1. 尽量使用压缩图片
      2. 尽量使用css动画，而不是使用js的定时器操作界面做动画
      3. 项目中不可避免的需要加载大量的动画和图片，建议加载时进行延时处理，分批进行大量数据通讯，提高页面的流畅性。否则会造成页面切换卡顿、掉帧等问题
   6. 使用nvue代替vue
      1. nvue限制太多，尽量不适用nvue来开发项目，但是看重新能问题，可以使用nvue来代替vue
      2. nvue时基于weex的原生渲染，可以有效提高页面的流畅度
   7. 尽量不要使用onPageScroll，
      1. onPageScroll里不要写交互复杂的js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非h5端，js是在逻辑层执行的，两层之间通信是有损耗的。如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿