乐趣区

关于性能优化:Swiperjs插件轮播滑动卡顿优化

jiezi

插件地址：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 元素尽量简化，用空 <SwiperItem/> 代替。目前采纳计划二解决。

具体实现：
1、获取以后轮播的 index。

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

2、加载轮播窗口左近 dom 元素、数组中最前和最初三个 swiper-item，其余用空 <SwiperItem/> 代替。

 <Swiper options={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)?                               
             <SwiperItem key={index}>
                <div className={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 系列之有限循环轮播组件
聊一聊前端性能优化

退出移动版