¿Cómo ocultar el contenido no en una vista visible en una página con muchos elementos HTML para mejorar el rendimiento?

Tengo un sitio con muchos elementos HTML (> 100.000).

La página es básicamente una tabla grande con más de 100 filas y cada fila tiene más de 1000 columnas. Entonces la vista es muy grande horizontalmente. El problema que he visto es que el rendimiento es muy malo después de aproximadamente 50,000 elementos. El usuario nunca verá todo el contenido de la tabla en una vista, pero tendrá que desplazarse para ver todo el contenido. Entonces, es solo una parte limitada de la mesa que el usuario verá.

Aquí está el violín que muestra el concepto: https://jsfiddle.net/q3ne6t9x/1/

Mi idea era establecer la display: none en las columnas no visibles dentro de la vista para reducir la cantidad de elementos que el navegador debe representar. Al hacer eso, la página vuelve suavemente y el rendimiento no es un problema.

Sin embargo, no estoy seguro de cómo ocultar y mostrar dinámicamente el contenido a medida que el usuario se desplaza horizontalmente. También quiero que la barra de desplazamiento refleje el tamaño de la página, incluso si alguna parte del contenido estará oculta.

¿Alguna sugerencia de cómo manejar este problema? ¿Hay alguna lib disponible que solucione este problema?

Acelerando la representación de tablas html grandes

Una de las características agradables de las tablas es que uno puede permitir que el navegador maneje el ancho de las celdas de la tabla. El navegador comienza a renderizar la tabla y cuando descubre que una celda necesita más espacio, volverá a representar la tabla con un ancho mayor para la columna específica.

Sin embargo, cuando la tabla contiene una gran cantidad de datos, el navegador puede tardar mucho tiempo en generar la tabla. Mientras que otros navegadores hacen esta representación de forma progresiva, Internet Explorer hace esta representación en la memoria y, por lo tanto, puede llevar algo de tiempo antes de que el usuario vea algo.

Se puede acelerar la representación estableciendo la propiedad CSS de la table-layouttable-layout en fixed . El navegador tomará la primera fila de la tabla para calcular el ancho de sus columnas. Así que asegúrese de especificar el ancho de las columnas en la primera fila.

Debido a que no es necesario realizar nuevas renderizaciones, esto acelerará la renderización de la tabla, e Internet Explorer también puede representarse progresivamente.

MDN: https://developer.mozilla.org/en/CSS/table-layout

Con el método de diseño “fijo”, la tabla completa se puede representar una vez que se haya descargado y analizado la primera fila de la tabla. Esto puede acelerar el tiempo de renderizado sobre el método de diseño “automático”, pero el contenido de celda posterior puede no ajustarse al ancho de columna proporcionado.

Por favor, consulte el ejemplo a continuación. Esta tabla tiene 100,000 celdas:

 function createTable() { for ( var i = 0, row, rowNumber, IndexCell; i < 1000; ++i ) { row = document.createElement( 'tr' ); row.className = 'row'; rowNumber = document.createElement( 'th' ); rowNumber.innerText = i + 1; rowNumber.className = 'cell'; row.appendChild( rowNumber ); IndexCell = 0; for ( var j = 1, cell2; j < 101; ++j ) { cell2 = row.insertCell( ++IndexCell ); cell2.innerText = j + ( i * 100 ); cell2.className = 'cell' } document.getElementById( 'tableContent' ).tBodies[0].appendChild( row ) } } if ( document.readyState != 'loading' ) createTable() else if ( document.addEventListener ) document.addEventListener( 'DOMContentLoaded', createTable ) else document.attachEvent( 'onreadystatechange', function() { if ( document.readyState == 'complete') createTable() } ); 
 body { margin: 0; background-color: #FFF; color: #333; font: 13px/1.2 Arial, Helvetica, sans-serif } table { table-layout: fixed; border-spacing: 0; border-collapse: collapse; text-align: center } .row { background-color: #FFF; cursor: pointer } .row:nth-child(even) { background-color: #EFF2F7 } .row:hover { background-color: #CDE } .cell { padding: 10px; background-color: transparent } .cell:hover { background-color: #9BD }