Playing
01. Why infinite scroll can be slow
Transcript
00:00
If you've ever implemented infinite scroll within Livewire,
00:02
you've probably come across the problem that as you get further down and start loading more and more data, every subsequent request gets slower. And that is an issue. There's a very good reason for that.
00:15
And I'm going to show you exactly why that is now. And in this course, we are going to come up with a very, very fast solution that as we load more records, we don't see any slowdown of each subsequent request that we make.
00:28
So just here, I've got a normal solution. And there's nothing necessarily wrong with this. But if we go ahead and open up our network tab here, and we start to scroll down, there's 1,000 records in the database here.
00:41
Notice the time section just here. So every request kind of looks about right. But as we keep going, you'll notice that every so often, it just starts to bump up in the amount of time it's taking.
00:53
And we're working with a very small amount of data here. There's not really much on the page. You can see that we're now up to over 100 milliseconds per request. So that can be a bit of an issue, particularly if you have, say,
01:06
a chat that you're building, and you have huge amounts of records that you want to scroll through. This can very, very quickly become a bit of a bottleneck. And you'll see that there will be very, very slow speeds,
01:18
particularly with this amount of data. So what we're going to do now is switch over to the solution that we're going to be building in this course and look with the same amount of records
01:27
how we don't see any performance degradation at all in terms of the amount of requests that we make and the time of each of them requests. So let's swap over to this now.
01:37
OK, so we've swapped over to the solution that we're going to be building in this course. Let's take a look with the same amount of records what kind of speeds we get here.
01:45
So again, head over to the Network tab here. And I'm just going to start scrolling down. And I'm going to go quite far. I'm going to see how far I can push this.
01:54
Obviously, there's a ton of records in here. If we keep going all the way down, let's get to about halfway through. And let's just take a look at the request.
02:02
So you can already kind of see here that the times are pretty much the same. We're not really going over 50 milliseconds for each of these requests,
02:12
despite this having exactly the same functionality as the previous solution that we built. So this is what we're going to be doing. I'm going to explain throughout the course
02:22
exactly how we achieve this. It's actually a pretty simple solution. It just requires doing a little bit more to get this working.
02:30
But it's very, very simple to implement. So let's go over to the next episode and see the database set up and start building this out.
5 episodes• 27 mins•1 year ago
Overview
Infinite scrolling in Livewire can be simple to implement, but things slow down as more data rolls in.
In this short course, we’ll look at a technique to load batches of records upfront, then fetch and render each batch only when its needed.
The result? No drop in performance, regardless of how many records a user scrolls through.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!