Use server-side processing when loading 400 rows of data with images?
Use server-side processing when loading 400 rows of data with images?
FilipNilsson
Posts: 5Questions: 2Answers: 0
Hi!
I have a table that display 4 columns with data, i am using pageinate.
On of those is a picture. The loading time is very slow, almost 22-24 seconds.
I started looking into server-side processing but it said that you should only use this if you have at least several thousand rows of data.
So my question is: Do i use server-side processing or is there some other way to make it faster?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
I'd need a link to the page to be able to profile it and understand where the slow down is currently coming from. Is it the Ajax response from the server, DataTables' processing or something else?
Allan
The page is using log in, if u want i can send u a mail with a login so you can check it out. (its just the main landing page where the issue is).
Im using laravel, so all the data is sent to the page when the page is being loaded, so it tries to load all the images immediately. (385 rows). Im fairly sure that it isn't datatables that is the bottleneck but rather the images. So i started looking in to server-side processing so that it only loads the images for the page that you are looking at. Loading 10 images wont take very long.
You can PM me by clicking my name above and then the "Send Message" button.
Allan
Thanks for the link. Your table is DOM sourced, which means that the browser will render the HTML table and then DataTables can do what it needs to do for enhancing the table.
The issue with this is that at the point when the browser renders the table, it displays all of the rows (we shouldn't see it actually draw it, but it will lay it out like that). That means the browser has all of those images to request - hence the issue.
There isn't anything DataTables can do about that, but you can change how your page is loading the data by Ajax loading the data into DataTables rather than DOM sourcing it. There is documentation about Ajax loading data here.
The advantage of this is that if you enable the
deferRenderoption, images will only be requested as they are displayed (i.e. as the user pages through the table), in effect making it lazy loading.I think that will give the largest possible performance gain for this page.
Allan
Thanks!
Will definetly try that out.