¿Cómo puedo reducir el tiempo de carga de una <table> que contiene 20000 filas?
la página es muy pesada cuando me desplazo, se tarda 4/5 segundos en mostrar el resto de la tabla.
No tengo ni idea de cómo hacer eso, por eso no puse un código.
Para este tipo de problema, básicamente, la solución es cargar sus datos de forma diferida.
Sugeriré las siguientes 2 opciones -->
Agregue Paginación a la tabla. Básicamente, solo cargará algunos registros y el resto se cargará de acuerdo con la página en la que el usuario hizo clic.
Pseudocódigo: -
//Paso 1: - Divida los datos en fragmentos, de modo que si desea dividirlos en 3 páginas, cada página tendrá 20000/3 registros.
//Paso 2: - Dependiendo de la página en la que se haga clic, puede mostrar los registros del fragmento dividido.
Agregue desplazamiento infinito a la tabla para que al usuario se le muestren algunos registros que pueden ajustarse a la altura de la pantalla y se cargarán datos adicionales a medida que el usuario se desplaza. También puede precargar algunos datos adicionales para que el usuario tenga un desplazamiento suave.
Pseudocódigo: -
//Paso 1:- Obtenga la altura de la ventana gráfica (la parte de la altura de la pantalla que el usuario puede ver) y solo cargue la cantidad de registros que se ajusten a la altura de la ventana gráfica. También puede cargar algunos registros adicionales. Entonces, digamos que el usuario a la vez puede ver solo 40 registros en la vista de pantalla, luego solo cargará 45 registros inicialmente en la pantalla.
//Paso 2: - Luego, puede escuchar el evento de desplazamiento y agregar los siguientes 45 registros/filas a la tabla y así sucesivamente a medida que el usuario se desplaza más.
Código para escuchar el evento de desplazamiento y cargar más datos-->
const div = document.querySelector("#div-container-for-table"); div.addEventListener("scroll", () => { if (div.scrollTop + div.clientHeight >= div.scrollHeight) loadMore(); });