插件地址: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系列之有限循环轮播组件
聊一聊前端性能优化