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

官方说明：