• 技术文章 >web前端 >uni-app

    如何优化uniapp项目?分享几种优化方案及建议

    青灯夜游青灯夜游2021-08-25 19:39:44转载230
    如何优化uniapp项目?下面本篇文章给大家分享一些uniapp项目优化方式及建议,希望对大家有所帮助。

    介绍:性能优化自古以来就是重中之重,关于uniapp项目优化方式最全整理,会根据开发情况进行补充

    1.复杂页面数据区域封装成组件

    场景:

    例如项目里包含类似论坛页面:点击一个点赞图标,赞数要立即+1,会引发页面级所有的数据从js层向视图层的同步,造成整个页面的数据更新,造成点击延迟卡顿

    优化方案:

    对于复杂页面,更新某个区域的数据时,需要把这个区域做成组件,这样更新数据时就只更新这个组件

    注:app-nvue和h5不存在此问题;造成差异的原因是小程序目前只提供了组件差量更新的机制,不能自动计算所有页面差量

    2.避免使用大图

    场景:

    页面中若大量使用大图资源,会造成页面切换的卡顿,导致系统内存升高,甚至白屏崩溃;对大体积的二进制文件进行 base64 ,也非常耗费资源

    优化方案:

    图片请压缩后使用,避免大图,必要时可以考虑雪碧图或svg,简单代码能实现的就不要图片

    3.小程序、APP分包处理pages过多

    前往官网手册查看配置

    4.图片懒加载

    功能描述:

    此功能只对微信小程序、App、百度小程序、字节跳动小程序有效,默认开启

    前往uView手册查看配置

    5.禁止滥用本地存储

    不要滥用本地存储,局部页面之间的传参用url,如果用本地存储传递数据要命名规范和按需销毁

    6.可在外部定义变量

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

    7.分批加载数据优化页面渲染

    场景:

    页面初始化时,逻辑层一次性向视图层传递很大的数据,使视图层一次性渲染大量节点,可能造成通讯变慢、页面切换卡顿

    优化方案:

    以局部更新页面的方式渲染页面;如:服务端返回 100条数据 ,可进行分批加载,一次加载 50条 , 500ms 后进行下一次加载

    8.避免视图层和逻辑层频繁进行通讯

    9.CSS优化

    要知道哪些属性是有继承效果的,像字体、字体颜色、文字大小都是继承的,禁止没有意义的重复代码

    10.善用节流和防抖

    防抖:

    等待n秒后执行某函数,若等待期间再次被触发,则等待时间重新初始化

    节流:

    触发事件n秒内只执行一次,n秒未过,再次触发无效

    11.优化页面切换动画

    场景:

    页面初始化时存在大量图片或原生组件渲染和大量数据通讯,会发生新页面渲染和窗体进入动画抢资源,造成页面切换卡顿、掉帧

    优化方案:

    12.优化背景色闪白

    场景:

    进入新页面时背景闪白,如果页面背景是深色,在vue页面中可能会发生新窗体刚开始动画时是灰白色背景,动画结束时才变为深色背景,造成闪屏

    优化方案:

    "style": { "app-plus": { "background":"#000000" } }

    13.优化启动速度

    14.优化包体积

    15.禁止滥用外部js插件

    描述:

    有官方API的就不要额外引用js插件增加项目体积

    例如:

    url传参加密直接用 encodeURIComponent() 和 decodeURIComponent()

    推荐:《uniapp教程

    以上就是如何优化uniapp项目?分享几种优化方案及建议的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    上一篇:Uniapp发布为H5版本时如何隐藏访问路径的#符号 下一篇:什么是render.js?UNiAPP中怎么使用它来绘制高德地图?
    线上培训班

    相关文章推荐

    • uniapp如何添加请求拦截器• uniapp插件安装慢怎么办• 解决UniAPP横屏样式错乱问题• 如何解决uniapp播放声音出错问题• Uniapp发布为H5版本时如何隐藏访问路径的#符号

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网