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

优化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.数据更新优化,减少数据对象的修改,尽量不要修改整个对象数组,去修改对象数组里面需要修改的值

官方说明: 

 

相关文章:

  • WebServiceg工具
  • 中心极限定理(CLT)习题集 · 题目篇
  • 深入浅出学会函数(上)
  • C++ 模板特化 (Template Specialization)
  • 如何规避矩阵运营中的限流风险及解决方案
  • springboot整合redis实现缓存
  • mapbox高阶,高程影像、行政区边界阴影效果实现
  • Windows 安装 JDK
  • Qt 处理 XML 数据
  • HarmonyOS:一多能力介绍:一次开发,多端部署
  • 声音分离人声和配乐-从头设计数字生命第5课, demucs——仙盟创梦IDE
  • 【Unity AR开发插件】一、高效热更新:Unity AR 插件结合 HybridCLR 与 ARFoundation 的开源仓库分享
  • 大模型技术全景解析:从基础架构到Prompt工程
  • Windows IIS 配置编辑器 应用程序初始化 <applicationInitialization>
  • docker容器监控自动恢复
  • PySide6 GUI 学习笔记——常用类及控件使用方法(常用类矩阵QRectF)
  • 从单机工具到协同平台:开源交互式模拟环境的技术演进之路
  • windows上的RagFlow+ollama知识库本地部署
  • Control Center安卓版:自定义控制中心,提升手机操作体验
  • CPT204 Advanced Obejct-Oriented Programming 高级面向对象编程 Pt.8 排序算法
  • 中国太保一季度净赚96.27亿元降18.1%,营收同比下降1.8%
  • 2025年全国贸易摩擦应对工作会议在京召开
  • “养老规划师”实则售卖保险,媒体:多部门须合力整治乱象
  • 打破“内卷”与“焦虑”怪圈,在阅读中寻找松弛感
  • 世卫发布预防少女怀孕新指南,呼吁终止童婚、延长女孩受教育时间
  • 山西国道塌方致55岁货车司机死亡,女儿:货车的车贷还要还