How can i reduce the loading time of a <table> that contains 20000 rows ?

the page is very heavy when i scroll, it takes 4/5s to display the rest of the table.

I don't have any idea how to do that, that's why i didn't put a code.

CodePudding user response：

For this type of problem basically the solution is to lazy load your data.
I will suggest the below 2 options -->

1. Add Pagination to the table. So basically you will only load few records and the rest will load according to the page clicked by the user.
   Pseudo Code:-
   //Step 1 :- Divide data into chunks so if you want to divide into 3 pages each page will have 20000/3 records.
   //Step 2:- Depending on the page clicked you can show the records from the divided chunk.

2. Add Infinite scrolling to the table so the user will be shown some records which can fit the screen height and extra data will be loaded as the user scrolls. You can also preload some extra data so that the user have smooth scrolling.
   Pseudo Code:-
   //Step 1 :- Get the viewport height(the part of screen height which the user can view) and only load amount of records which can fit the height of the viewport. You can load some extra records too. So lets say the user at a time can view only 40 records on the screen view, then you will only load 45 records initially on the screen.
   //Step 2:- Then next you can listen to the scroll event and add the next 45 records/rows into the table and so on as the user scrolls more.

Code to listen to scroll event and load more data-->

   const div = document.querySelector("#div-container-for-table");
    div.addEventListener("scroll", () => {
      if (div.scrollTop   div.clientHeight >= div.scrollHeight) loadMore();
    });

Example for Infinite scroll
Example for Pagination
I would recommend to go with the second option as its more user friendly and needs no clicking.