Swiperjs插件轮播滑动卡顿优化

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

场景:

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

原因:

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

解决方案:

主要思想:简化dom结构。

方案一: 使用api中virtual,开启虚拟Slide功能。但是不适用于我们当前的无限轮播。

Note that according to Virtual Slides realization it doesn't work with
loop mode, slidesPerColumn more than 1 and slidesPerView: 'auto'

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

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

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

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

 
     {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)?                               
             
                
renderItem(item, index)
: ); })}

为什么需要一直保留数组中最前和最后三个swiper-item?

当前loop:true,无限循环模式,Swiper复制了两份swiper-item(slideDuplicateClass),分别添加在原始的swiper-item前后位置,但是slideDuplicateClass只在Swiper初始化的时候渲染,之后动态显示窗口附近的dom元素,无法改变slideDuplicateClass的dom的结构,就会出现轮播到最后一个的时候空屏的情况。
无限循环轮播的核心就在于头尾多出的两张图,从图三再向后滑动,会滑到红色图一,这个时候给用户的感觉就是无缝从最后一张滑动到第一张的,当他滑到占位图一时,我们再瞬间切换到粉色图一(即真正的图一),由于是瞬间变换,用户是感知不到的。同理,从图一滑到图三也一样。
Swiperjs插件轮播滑动卡顿优化_第1张图片

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

参考:
原生js系列之无限循环轮播组件
聊一聊前端性能优化

你可能感兴趣的