Как скрыть содержимое, не отображаемое на странице с множеством элементов HTML, для повышения производительности?

Question

У меня есть сайт с очень большим количеством элементов HTML (> 100.000).

Страница в основном представляет собой большую таблицу с более чем 100 строками, а каждая строка содержит более 1000 столбцов.Таким образом, вид очень большой по горизонтали.Проблема, которую я видел, заключается в том, что после 50 000 элементов производительность очень плохая.Пользователь никогда не увидит весь контент таблицы в одном представлении, но ему нужно будет прокрутить, чтобы увидеть весь контент.Так что это лишь ограниченная часть таблицы, которую увидит пользователь.

Вот скрипка, которая показывает концепцию: https://jsfiddle.net/q3ne6t9x/1/

Моя идея заключалась в том, чтобы установить display: none на столбцах, а невидимый в представлении, чтобы уменьшить количество элементов, которые должен отображать браузер.При этом страница плавно перерисовывается, и производительность не является проблемой.

Однако я не уверен, как динамически скрывать и показывать контент, когда пользователь прокручивает по горизонтали.Также я хочу, чтобы полоса прокрутки отражала размер страницы, даже если некоторая часть содержимого будет скрыта.

Есть предложения, как решить эту проблему?Есть ли доступная библиотека, которая решает эту проблему?

Answer 1

Ускорение рендеринга больших HTML-таблиц

Одной из приятных особенностей таблиц является то, что браузер может обрабатывать ширину ячеек таблицы. Браузер начинает отображать таблицу и, когда он обнаруживает, что ячейке требуется больше места, он будет повторно отображать таблицу с увеличенной шириной для определенного столбца.

Однако, когда таблица содержит много данных, браузеру может потребоваться много времени для ее визуализации. В то время как другие браузеры делают это рендеринг постепенно, Internet Explorer делает это рендеринг в памяти, и поэтому может потребоваться некоторое время, прежде чем пользователь увидит что-либо.

Можно ускорить рендеринг, установив свойство CSS таблицы ‘table-layout’ в ‘fixed’ . Затем браузер возьмет первую строку таблицы, чтобы вычислить ширину ее столбцов. Поэтому обязательно указывайте ширину столбцов в первой строке.

Поскольку повторный рендеринг не требуется, это ускорит рендеринг таблицы, и Internet Explorer также может выполнять рендеринг постепенно.

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

При «фиксированном» методе компоновки вся таблица может отображаться после загрузки и анализа первой строки таблицы. Это может ускорить время рендеринга по сравнению с «автоматическим» методом макета, но последующее содержимое ячейки может не вписаться в предоставленную ширину столбца.

Пожалуйста, обратитесь к примеру ниже. В этой таблице 100 000 ячеек:

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
}

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