Question

我的网站包含极多的HTML元素（＆gt; 100.000）。

该页面基本上是一个包含超过100行的大表，每行有超过1000列。因此视图水平非常大。我看到的问题是在大约50.000个元素之后性能非常糟糕。用户永远不会在一个视图中看到整个表格内容，但需要滚动才能看到所有内容。因此，它只是用户将看到的表的有限部分。

这是表示概念的小提琴：https://jsfiddle.net/q3ne6t9x/1/

我的想法是在视图中不可见的列上设置display: none，以减少浏览器需要呈现的元素数量。当这样做时，页面可以平滑地重新运行并且性能不是问题。

但是，当用户水平滚动时，我不确定如何动态隐藏和显示内容。此外，我希望滚动条反映页面的大小，即使内容的某些部分将被隐藏。

有任何建议如何处理这个问题？有没有可用的lib来解决这个问题？

Answer 1

加快大型html表格的渲染

表的一个很好的功能是可以让浏览器处理表格单元格的宽度。浏览器开始渲染表格，当它发现一个单元格需要更多空间时，它将重新渲染表格，增加特定列的宽度。

但是当表包含大量数据时，浏览器可能需要花费大量时间来呈现表。当其他浏览器逐步渲染时，Internet Explorer会在内存中进行渲染，因此在用户看到任何内容之前可能需要一些时间。

通过将表格的CSS属性'table-layout'设置为'fixed'，可以加快渲染速度。然后，浏览器将获取表格的第一行来计算其列的宽度。因此，请务必在第一行中指定列的宽度。

因为不需要重新渲染，这将加速表的呈现，并且Internet Explorer也可以逐步呈现。

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

在＆＃34;固定＆＃34;布局方法，一旦第一个表行被下载和分析，整个表就可以呈现。这可以加快＃34;自动＆＃34;布局方法，但后续单元格内容可能不适合所提供的列宽。

请参阅下面的示例。该表有100,000个单元格：

＆＃13;

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()
} );

＆＃13;

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
}

＆＃13;

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

＆＃13;

如何在具有许多HTML元素的页面上隐藏不在可见视图中的内容以提高性能？

1 个答案: