Swiperjs.com/

Scene:

Automatic rotation of dozens of items, components sliding lag is obvious, the number of rotation of less than 20 is normal.

The reason:

Before rotation, render all swiper-items, and dom elements are cyclically mounted to the DOM tree in one breath. When there are a lot of swiper-items, dom node memory increases, and the memory occupied by listening events gradually increases, so the sliding jam phenomenon occurs.

Solution:

Main idea: Simplify DOM structure.

Solution a:Enable the virtual Slide function using the API virtual. But not for our current infinite rotation.

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

Scheme 2:The idea of windowing is to simplify dom elements that are not displayed as far as possible and replace them with empty ones. Currently, solution 2 is adopted.

Specific implementation: 1. Obtain the index of the current round.

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

2. Load the first and last three swiper-items of dom elements near the wheel casting window, and replace the others with empty ones.

<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, len - 3-2,,0,1,2,3 len - 1]). Includes (index)? <SwiperItem key={index}> <div className={cx(s.item, 'swiper-lazy')} data-index={index}> renderItem(item, index) </div> </SwiperItem> : <SwiperItem /> ); })} </Swiper>Copy the code

Why do I always keep the first and last three swiper-Items in the array?

Current loop: True, infinite loop mode, duplicateclass: duplicateclass: Duplicateclass: Duplicateclass SlideDuplicateClass will render only when Swiper is initialized, and will not be able to change the structure of the DOM around the dynamic display window. SlideDuplicateClass will be empty when Swiper reaches the end. Infinite loop by the core lies in the end of the extra two pictures, from figure 3 sliding backwards again, will slide to the red figure, this time the sense that gives a user is seamless from the last slide to the first one, as he slid into the placeholder figure at that time, we will instantly switch to figure 1 pink (i.e., the real figure 1), due to a sudden transformation, the user is not perceive. The same goes for sliding from Figure 1 to Figure 3.

The visual window displays three images: the first and last swiper-items in the array are reserved, and the slideDuplicateClass has the corresponding renderItem when initialized. For example, if the last element in the loop is 9, the next element should be the index=0 of the slideDuplicateClass element.

Talk about front-end performance optimization