如何在具有许多 HTML 元素的页面上隐藏不可见视图中的内容以提高性能? [英] How to hide content not in visible view on a page with many HTML elements to improve performance?

问题描述

我有一个包含大量 HTML 元素(> 100.000)的网站.

I have a site with extremely many HTML elements (> 100.000).

页面基本上是一个大表，有 100 多行，每行有 1000 多列.所以水平方向的视野非常大.我看到的问题是在大约 50.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 large horizontally. The issue I have seen is that the performance is very bad after about 50.000 elements. The user will never see the whole table content in one view, but will need to scroll to see all content. So its only a limited part of the table that the user will see.

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

Here is fiddle which shows the concept: https://jsfiddle.net/q3ne6t9x/1/

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

My idea was to set display: none on the columns not visible within the view to reduce the number of elements the browser needs to render. When doing that the page rederns smoothely and performance is not an issue.

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

However, I am not sure how to dynamically hide and show the content as the user scrolls horizontally. Also I want the scrollbar to reflect the size of the page even if some part of the content will be hidden.

有什么建议可以解决这个问题吗?有没有可以解决这个问题的库?

Any suggestions how to handle this problem? Is there any lib available which solves this problem?

推荐答案

加速渲染大型 html 表格

表格的一大优点是可以让浏览器处理表格单元格的宽度.浏览器开始渲染表格，当它发现一个单元格需要更多空间时，它会重新渲染表格，增加特定列的宽度.

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.

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

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.

可以通过将表格的 CSS 属性 'table-layout' 设置为 'fixed' 来加速渲染强>.然后浏览器将采用表格的第一行来计算其列的宽度.所以一定要指定第一行的列宽.

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.

因为不需要重新渲染，这会加快表格的渲染速度，而且 Internet Explorer 也可以渐进式渲染.

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.

请参考下面的例子.此表有 100,000 个单元格:

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

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>

这篇关于如何在具有许多 HTML 元素的页面上隐藏不可见视图中的内容以提高性能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！