[Help]: Optimizing Performance with Lazy Rendering

[meirroth]

Summary

I've run into a bit of a snag with my implementation. I'm dealing with a carousel that has hundreds of slides, each one a custom component. As you can imagine, rendering all of these at once is causing some serious performance issues, almost to the point of crashing the page.

I've been trying to implement a solution where only the slides currently in view are rendered dynamically. However, I'm not having much luck getting it to work. I was hoping you might be able to give me some guidance or point me in the right direction?

Here's what I've got so far: https://stackblitz.com/edit/github-yqleaf?file=app.vue

Any help would be greatly appreciated. Thanks in advance!

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

@meirroth you can keep track of which slides you want to render using both the slidesInView method and event. Here's a piece of vanilla code that you can consider pseudo code. You can translate it into the Vue way yourself:

let slidesInView = emblaApi.slidesInView(); // initial state

emblaApi.on('slidesInView', (emblaApi) => {
  slidesInView = emblaApi.slidesInView();
});

And then, add a watcher that will update as soon as slidesInView change. After that you can only render slide content for slides that are in view.

Note

emblaApi.slidesInView() returns an array with the indexes of which slides are in view, not the slide elements!

Best,
David

[meirroth]

@davidjerleke I tried following your direction, it works better, but still doesn't scroll smoothly, any ideas?
https://stackblitz.com/edit/github-yqleaf-dusy19?file=app.vue

[davidjerleke]

@meirroth does this StackBlitz lag for you? It doesn't for me. I've made some modifications there. The most significant is that I only attach a single slidesInView listener and not add a new listener every time the state changes. See comments in code.

Best,
David

[meirroth]

@davidjerleke Wow that works perfectly! Thank you so much for all your help, it is really appreciated!
I think moving the v-if="shouldRenderSlide(i)" from embla__slide to embla__slide__inner did the trick.
Also, moving event listeners from watchEffect to onMounted makes total sense. Thank you for pointing that out.

[meirroth]

I've updated this method so that slides are rendered in SSR:

function shouldRenderSlide(index: number) {
  if (slidesInView.value.length === 0) {
    return index < 4;
  }
  return slidesInView.value.includes(index);
}