Open full view…

Laggy performance when looping complex elements

Tue, 13 Feb 2018 01:21:04 GMT

I'm using swiper's loop mode with some big divs as slides (let's say I have 10 slides, and each one has 100 child elements). The performance is noticeably laggy, and chrome devtools shows some big purple CSS "Recalculate Style" blobs as the reason. Basically, doing `swiper.reloop()` in swiper 3, or the equivalent in swiper 4 (`loopDestroy, loopCreate, updateSlides`) after a slide change triggers some heavy "recalculate style" and "layout" work that affects thousands of elements (since in loop mode, our slideset is duplicated on the left and right of the "true" slides, so there's 3 times the amount of slide elements). Any ideas how to get around this issue? Or a different way of updating the status of looped slides after a slide change? It looks like the performance bottleneck is the `updateSlides` step.