performance measurement
Closed this issue · 6 comments
The most important nowadays is performance. Do you have a comparison with other popular sliders like owl,...etc to see if a slider based on Snap scroll is better than other ones?
@tannerhodges do you have any idea?
Hey @onlinebizsoft! Great question.
I haven't run any thorough performance tests to compare Snap Slider to other plugins yet, unfortunately, but…
😄 I'd be happy to run some tests!
I have some other projects in the works right now, but I should have time in the next 2 weeks to put together some basic comparisons.
In the meantime, here's my theory (for what it's worth): Snap Slider should be faster/lighter because it relies on native CSS scrolling instead of JS animations, etc. Rather than trying to recreate slide animations, it simply watches scrollable elements for changes. At its core, Snap Slider is basically an event library for scrollable elements using CSS Scroll Snap. So you get the benefits of a typical slider library (e.g., goto buttons and onchange events) along with the smoothness and performance of native scrolling.
I'll follow up again when I've run the tests to compare.
🙏 Til then, let me know if you have any other questions, or specific performance concerns I should look into.
I believe the running performance would be better but we also need to compare the initialazation performance.
Hey @onlinebizsoft, I've setup some basic demos to test performance at https://github.com/tannerhodges/snap-slider-perf
The tests compare Snap Slider against Flickity, Owl Carousel 2, Slick, Swiper, and Tiny Slider 2.
📊 You can see a full breakdown of the results here: https://github.com/tannerhodges/snap-slider-perf#results
tl;dr Snap Slider has the fastest startup time and lowest overall cost. Flickity is a very close second (an excellent library!), and Tiny Slider 2 is also a good runner-up.
In terms of performance, the biggest difference between them is how much they modify the DOM. The more sliders you have on the page, the more work each plugin has to do to initialize every slider. If you only have 1–3 sliders per page, you probably won't notice much difference between those top three libraries. After about 5+ sliders, the differences start to show.
My personal recommendation for sliders would be:
- Snap Slider for flexible styling.
- Flickity for rich interactions.
Let me know whether this helps, or if you have other performance questions I can answer.
@tannerhodges it is a really great comparison. Thank you.
🙏 Glad to hear it. Let me know if there's anything else I can help with.