How To Hide Content Not In Visible View On A Page With Many Html Elements To Improve Performance?

I have a site with extremely many HTML elements (> 100.000). The page is basically a large table with over 100 rows and each row has more than 1000 columns. So the view is very

Solution 1:

Speeding up rendering of large html tables

One of the nice features of tables is that one can let the browser handle the width of table cells. The browser starts rendering the table and when it finds that a cell needs more space, it will re-render the table with an increased width for the specific column.

However when the table contains a lot of data, it might take the browser a lot of time to render the table. While other browsers do this rendering progressively Internet Explorer does this rendering in memory and thus it could take some time before the user sees anything.

One can speed up the rendering by setting the table’s CSS property ‘table-layout’ to ‘fixed’. The browser will then take the first row of the table to calulate the widths of its columns. So be sure to specify the width of columns in the first row.

Because no re-rendering has to be done, this will speed up the rendering of the table, and Internet Explorer can also render progressively.

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

Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the "automatic" layout method, but subsequent cell content may not fit in the column widths provided.

Please refer to the example below. This table has 100,000 cells:

functioncreateTable() {
    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()
elseif ( document.addEventListener )
    document.addEventListener( 'DOMContentLoaded', createTable )
elsedocument.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
}

<tableid="tableContent"><tbody></tbody></table>