Swiperjs插件轮播滑动卡顿优化

发布网友发布时间：2024-09-26 03:32

我来回答

共1个回答

热心网友时间：2024-11-23 08:36

插件地址：https://swiperjs.com/

场景：

自动轮播几十个item，组件滑动卡顿明显，轮播个数为20个以下表现正常。

原因：

轮播前，渲染所有的swiper-item，dom元素一口气循环挂载到dom树上，当swiper-item个数很多的时候，dom节点内存增大，监听事件占用的内存也逐渐加大，所以出现滑动卡顿现象。

解决方案：主要思想：简化dom结构。方案一：使用api中virtual，开启虚拟Slide功能。但是不适用于我们当前的无限轮播。

NotethataccordingtoVirtualSlidesrealizationitdoesn'tworkwithloopmode,slidesPerColumnmorethan1andslidesPerView:'auto'

方案二：窗口化思想，把没有显示出来的dom元素尽量简化，用空代替。目前采用方案二解决。

具体实现：1、获取当前轮播的index。

on:{slideChange:function(){_this.swiperIndex=this.realIndex;},}

2、加载轮播窗口附近dom元素、数组中最前和最后三个swiper-item，其他用空代替。

<Swiperoptions={options}onSwiperInit={this.onSwiperInit}className={s.slider}wrapperCls={s.wrapper}>{list.slice(0,len).map((item,index)=>{return({(this.swiperIndex<index+6&&this.swiperIndex>6||[len-3,len-2,len-1,0,1,2,3]).includes(index)?<SwiperItemkey={index}><divclassName={cx(s.item,'swiper-lazy')}data-index={index}>renderItem(item,index)</div></SwiperItem>:<SwiperItem/>);})}</Swiper>为什么需要一直保留数组中最前和最后三个swiper-item？

当前loop:true，无限循环模式，Swiper复制了两份swiper-item（slideDuplicateClass），分别添加在原始的swiper-item前后位置，但是slideDuplicateClass只在Swiper初始化的时候渲染，之后动态显示窗口附近的dom元素，无法改变slideDuplicateClass的dom的结构，就会出现轮播到最后一个的时候空屏的情况。

无限循环轮播的核心就在于头尾多出的两张图，从图三再向后滑动，会滑到红色图一，这个时候给用户的感觉就是无缝从最后一张滑动到第一张的，当他滑到占位图一时，我们再瞬间切换到粉色图一（即真正的图一），由于是瞬间变换，用户是感知不到的。

同理，从图一滑到图三也一样。

可视窗口显示三张图片：保留数组中最前和最后三个swiper-item，在初始化的时候slideDuplicateClass就有相应的renderItem。比如当轮播index为最后一个元素9，下一个应该为slideDuplicateClass的index=0元素，解决空屏问题。

参考：

原生js系列之无限循环轮播组件

聊一聊前端性能优化