How to optimize the long page of the site?

Question

Frontend

I have a table site that has a form for entering data rows to be loaded for this table, and when more than 1000 rows are loaded, there is a delay in rendering the page, about 3 or more seconds, and after rendering the page starts to lag, how to optimize it, and how to put the loading gif before rendering all the data requested by the user?

Answer 1

Do string preloading, i.e. instead of 1000 rows, immediately load 2000 or more (select empirically according to the style of using the table), but continue to show only 1000 as a window among those already loaded.
When scrolling down, run an ajax request to load data below, when scrolling up - above, so while the user is looking at the data, the application loads them.
ps So your rendering slows down? 3 seconds is a lot, what are you doing there?

Answer 2

Rendering a large number of lines greatly reduces performance, try not to display all lines at the same time. You can use either like this or google 'js virtualized scroll table'