当前位置: 首页 > ds >正文

优化uniappx页面性能,处理页面滑动卡顿问题

问题:在页面遇到滑动特别卡的情况就是在页面使用了动态样式或者动态类,做切换的时候页面重新渲染导致页面滑动卡顿

解决:把动态样式和动态类做的样式切换改为通过获取元素修改样式属性值

循环修改样式示例 

bannerList.forEach((_, index) => {uni.getElementById(`swiper-dot-${index}`)?.style.setProperty('backgroundColor', e.detail.current == index ? '#fff' : '#ededed');uni.getElementById(`swiper-dot-${index}`)?.style.setProperty('width', e.detail.current == index ? '18px' : '12px');
})

优化总结

1.减少dom数量,少套无用的壳,在一个元素渲染更多的内容

2.页面编写优化

  1. 请使用transform方式,而不是给dom的left/top/width/height等position参数重新赋值。这个在web开发也一样,直接改position参数不如使用transform。因为每次修改position参数都要过排版,而transform不用。
  2. 请拿到dom的id/ref,调用js api操作,而不是通过模板style绑定data操作。因为操作data需要vue框架做diff对比,直接API操作则可以跳过vue框架。在touch和滚动中,16毫秒一帧才能达到最平滑的效果,多了几毫秒就可能掉帧。
  3. 首先还是dom元素数量和层级,直接影响排版
  4. 给dom元素指定明确的宽高,而不是很多自适应计算,可以提高排版效率。比如父节点未指定宽高,需要等所有子节点计算好宽高后把父节点撑开,这样就会比较低效。
  5. 指定主轴方向的尺寸可以减少递归的深度
  6. 文字测量属于耗时操作,给text组件指定宽高可以提升排版效率
  7. 指定图片的尺寸信息可以减少排版次数
  8. css单位尺寸性能比较,px > rpx > 百分比,使用百分比时父节点有明确宽高或者不依赖子节点确定宽高可以提升排版效率

 3.数据更新优化,减少数据对象的修改,尽量不要修改整个对象数组,去修改对象数组里面需要修改的值

官方说明: 

 

http://www.xdnf.cn/news/1625.html

相关文章:

  • 时序数据库IoTDB构建的能源电力解决方案
  • JVM-类加载机制
  • 【docker】 pull FROM build
  • 3.1.3 materialDesign:DialogHost 使用介绍
  • Whisper微调及制作方言数据集
  • Golang 闭包学习
  • arm64适配系列文章-第三章-arm64环境上mariadb的部署
  • 一行命令打开iOS模拟器
  • uniapp -- 实现微信小程序、app、H5端视频上传
  • ORACLE RAC环境使用ASM机制零宕机时间更换存储的实践
  • matlab 绘图
  • 【leetcode100】目标和
  • MongoDB副本集搭建与核心机制
  • 【MySQL】基本查询
  • 如何解析商品详情页面
  • 简单几步,开启 Intel VT-x 让电脑“解开CPU封印”
  • SiamMask中的分类分支、回归分支与Mask分支,有何本质差异?
  • 【LLM+Code】Github Copilot Agent/VsCode Agent 模式PromptTools详细解读
  • 【含文档+PPT+源码】基于SpringBoot+vue的疫苗接种系统的设计与实现
  • MySQL总结
  • 深度剖析操作系统核心(第一节):从X86/ARM/MIPS处理器架构到虚拟内存、分段分页、Linux内存管理,再揭秘进程线程限制与优化秘籍,助你成为OS高手!
  • 如何彻底卸载Android Studio?
  • aarcpy 列表函数的使用(1)
  • 分页查询优惠券
  • Unity 使用 ADB 实时查看手机运行性能
  • 【技术派后端篇】技术派中 Session/Cookie 与 JWT 身份验证技术的应用及实现解析
  • 详解springcloudalibaba采用prometheus+grafana实现服务监控
  • Qt UDP组播实现与调试指南
  • leetcode28. 找出字符串中第一个匹配项的下标_简单KMP
  • vue3 实现将html内容导出为图片、pdf和word