uniapp性能优化,uniapp开发技巧
如何优化uniapp项目？下面这篇文章分享了uniapp项目的一些优化方法和建议，希望对你有所帮助。
UNI-APP开发(仿饿)开发课程：进入学习
介绍：性能优化自古以来就是重中之重，关于uniapp项目优化方式最全整理，会根据开发情况进行补充
1.复杂页面数据区域封装成组件
场景：
比如项目中包含一个类似的论坛页面：点击一个喜欢的图标，喜欢的数字立刻为1，会触发js层到view层的所有页面级数据同步，导致整个页面的数据更新，造成点击延迟。
优化方案：
对于复杂的页面，在更新一个区域的数据时，需要将这个区域做成一个组件，这样在更新数据时，只会更新这个组件。
注意：app-nvue和h5不存在这个问题；区别的原因是目前小程序只提供了更新组件方差的机制，不能自动计算所有页面方差。
2.避免使用大图
场景：
如果页面中使用了大量的大图片资源，会造成页面切换卡顿，导致系统内存增加，甚至白屏死机；大量二进制文件的Base64也消耗大量资源。
优化方案：
请压缩图像并使用它们，避免大图像。必要的话考虑Sprite或者svg，简单代码能实现就不要用图片。
3.小程序、APP分包处理pages过多
去官网手册查配置。
4.图片懒加载
功能描述：
该功能仅对微信小程序、App、百度小程序、字节跳动小程序有效，默认开启。
转到u view手册查看配置。
5.禁止滥用本地存储
不要滥用本地存储。url用于本地页面之间的传输。如果您使用本地存储来传输数据，您应该命名规范并按需销毁它。
6.可在外部定义变量
在uni-app中，每次data中定义的数据发生变化时，都会通知视图层重新渲染页面；所以如果不是视图需要的变量，可以在数据中定义，变量可以外部定义或者直接挂载在vue实例上，避免资源浪费。
7.分批加载数据优化页面渲染
场景：
页面初始化时，逻辑层一次性向视图层传输大量数据，使得视图层一次性渲染大量节点，可能会造成通信缓慢和页面切换。
优化方案：
通过本地更新页面来呈现页面；比如服务器返回100条数据，可以批量加载，一次加载50条数据，500 ms后再进行下一次加载。
8.避免视图层和逻辑层频繁进行通讯
减少对滚动视图组件的滚动事件的监控。当监控滚动视图的滚动事件时，视图层会频繁地向逻辑层发送数据。
在监控scroll-view组件的滚动事件时，不要实时更改scroll-top/scroll-left属性，因为在监控滚动时，视图层与逻辑层通信，而在更改scroll-top/scroll-left时，逻辑层与视图层通信，可能会造成通信阻塞。
注意onPageScroll的使用。onPageScroll监控时，视图层会频繁地向逻辑层发送数据。
通过js定时器接口用css动画代替动画。
如果需要在canvas中做后续操作，app端建议使用renderjs，小程序端建议使用web-view组件；web-view的页面中没有逻辑层和视图层分离的概念，自然不会有通信损耗。
9.CSS优化
您应该知道哪些属性是继承的，比如字体、字体颜色和文本大小。禁止重复无意义的代码。
10.善用节流和防抖
防抖：
等待n秒后执行功能。如果等待时间再次被触发，等待时间将被重新初始化。
节流：
触发事件仅在n秒内执行一次，如果n秒未过去，则再次触发无效。
11.优化页面切换动画
场景：
页面初始化时有大量的图片或原生组件渲染和大量的数据通信，会造成新的页面渲染和进入动画的表单抢夺资源，导致页面切换卡顿和丢帧。
优化方案：
建议延迟渲染图片或复杂的原生组件100 ms到300 ms，分批进行数据通信，减少一次性渲染的节点数量。
App动画效果可定制；Popin/popout的双窗体联动挤压动画效果消耗资源较多，如果动画过程中在页面中执行耗时的js，可能会导致动画丢帧；此时，您可以使用消耗
App-nvue和H5还支持页面预加载，uni.preloadPage，可以提供更好的体验。
12.优化背景色闪白
场景：
进入新页面时，背景会闪烁。如果页面背景是深色的，在vue page中可能会发生新表单在动画开始时背景是灰色的，然后在动画结束时变成深色背景，导致闪屏。
优化方案：
在App.vue中编写样式可以加快页面样式的渲染速度；App.vue中的样式是全局的。每次打开新页面，都会先加载App.vue中的样式，然后加载普通vue页面的样式。
app还可以在pages.json的样式中单独配置页面的原生背景色，比如在global style-style-app-plus-background下配置全局背景色。
style :{ app-plus :{ background : # 00000 } } nvue页面没有这个问题，可以改成NVUE页面。
13.优化启动速度
工程代码越多，包括背景图片和本地字体文件，大小越大，会影响小程序的启动速度。我们应该注意控制音量。
App端有闪屏关闭的白屏检测机制。如果主页总是白色或者主页本身是一个空的中转页，可能会导致splash关闭10秒。
App使用v3编译器，首页为nvue页面时设置为快速启动模式，此时App启动速度最快。
App设置为纯nvue项目(在manifest中设置了app-plus下的渲染器： native )，这类项目启动速度更快，2秒即可完成启动；因为它的整个应用使用原生渲染，所以不加载基于webview的框架。
14.优化包体积
Uni-App分发给小程序时，如果使用es6到es5和css对齐的功能，可能会增加代码量。您可以配置是否打开这些编译功能。
在uni-app的H5端，uni-app提供了摇树优化机制。树摇优化前的uni-app整体包量约为500k，gzip部署后的服务器整体包量为162k。打开摇摆树优化并在清单中进行配置。
uni-app的app端，安卓基础引擎9M左右，App还提供扩展模块，比如地图、蓝牙等。如果在打包时不需要这些模块，可以把它们剪下来，减少分发包；您可以从卷manifest.json-App模块的权限中进行选择。
App支持：如果选择纯nvue项目(在manifest中设置app-plus下的渲染器： native )，包体积可以进一步减少约2M。
App端在HBuilderX 2.7之后，App端的非v3编译模式掉线，包体积减少3M。
15.禁止滥用外部js插件
描述：
如果有官方API，就不要添加js插件来增加项目的体量。
例如：
url直接用encodeURIComponent()和decodeURIComponent()加密。
推荐：以上《uniapp教程》是如何优化uniapp项目的？分享几个优化方案的细节和建议。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。