Aquí hay un par de optimizaciones que puede aplicar para acelerar las cosas. Solo pensando en voz alta.
Dado que el número de filas puede ser de millones, querrá un sistema de almacenamiento en caché solo para los datos JSON del servidor. No puedo imaginar a nadie que quiera descargar todos los X millones de elementos, pero si lo hicieran, sería un problema. Esta pequeña prueba en Chrome para una matriz en enteros de 20M + se bloquea constantemente en mi máquina.
var data = [];
for(var i = 0; i < 20000000; i++) {
data.push(i);
}
console.log(data.length);
Podría usar LRU o algún otro algoritmo de almacenamiento en caché y tener un límite superior sobre la cantidad de datos que está dispuesto a almacenar en caché.
Para las celdas de la tabla en sí, creo que construir / destruir nodos DOM puede ser costoso. En su lugar, podría predefinir X número de celdas, y cada vez que el usuario se desplace a una nueva posición, inyecte los datos JSON en estas celdas. La barra de desplazamiento prácticamente no tendría relación directa con la cantidad de espacio (altura) que se requiere para representar todo el conjunto de datos. Puede establecer arbitrariamente la altura del contenedor de la tabla, digamos 5000 px, y asignarla al número total de filas. Por ejemplo, si la altura de los contenedores es de 5000 px y hay un total de 10M filas, entonces el starting row ≈ (scroll.top/5000) * 10M
lugar scroll.top
representa la distancia de desplazamiento desde la parte superior del contenedor. Pequeña demostración aquí .
Para detectar cuándo solicitar más datos, idealmente un objeto debe actuar como un mediador que escucha los eventos de desplazamiento. Este objeto realiza un seguimiento de qué tan rápido se está desplazando el usuario, y cuando parece que el usuario se está desacelerando o se ha detenido por completo, realiza una solicitud de datos para las filas correspondientes. Recuperar datos de esta manera significa que sus datos estarán fragmentados, por lo que el caché debe diseñarse teniendo esto en cuenta.
También los límites del navegador en las conexiones salientes máximas pueden jugar un papel importante. Un usuario puede desplazarse a una determinada posición que disparará una solicitud AJAX, pero antes de que finalice, el usuario puede desplazarse a otra parte. Si el servidor no responde lo suficiente, las solicitudes se pondrán en cola y la aplicación no responderá. Puede usar un administrador de solicitudes a través del cual se enrutan todas las solicitudes, y puede cancelar las solicitudes pendientes para hacer espacio.