Question

我有一个页面使用jQuery tabs来标记一组HTML表格。我们注意到，当表格有大量（> 1000）行时，制表符之间的性能切换可能会很差。

经过一些分析后发现，糟糕的表现与选项卡'$show.removeClass( "ui-tabs-hide" );功能中的showTab行隔离。

这是通过一个简单的网页证明的，该网页包含一个包含20列和1000行的表格，包含div元素。

可疑jQuery，我们从页面中删除了所有jQuery，最终得到了以下纯JavaScript方法：

<style type="text/css">
    div.tableContainer
    {
        height: 500px;
        width: 800px;
        overflow: auto;
    }
    div.hidden
    {
        display: none;
    }
</style>

<script type="text/javascript">
    function showTable() {
        var x = document.getElementById("theTable");
        x.className = "tableContainer";
    }
</script>

<a href="javascript:showTable()">Show</a>
<div id="theTable" class="hidden tableContainer">
<table>
    <!-- 1000 table rows, with 20 cells each -->
</table>
</div>

性能仍然很差，需要大约一秒钟才能在Firefox 5和IE8中显示该表。

有人可以推荐一种更高效的方法吗？（除了分页表内容之外，我们可能不得不求助，但需要重新编写很多代码）

Answer 1

问题在于表格比什么都重要。 1000 TRs *然而，许多TD是DOM元素的 lot ，供浏览器重新渲染。

我想到的唯一想法是尝试不是交换显示css属性，而是尝试将表放在屏幕外而不是“隐藏”它。

或者，或者，根本不要隐藏它。将其保留在页面上，并在想要“隐藏”它时用DIV“覆盖”它。

所有这一切，这是一个巨大的表，所以真正的解决方案可能是重新设计页面本身。也许不要在页面上使用选项卡，并让用户在其自己的浏览器选项卡中启动每个页面。

Answer 2

尝试使用

隐藏表，而不是使用隐藏的类（我认为它有display: none;）

position: relative;
left: -9999999px;

我知道这是一个黑客但可能有用; - ）

Answer 3

您也可以尝试使用visibility:hidden代替display:none。

Answer 4

1000行不适合用户屏幕（我认为:)）。

那么为什么不加载适合屏幕的行（可能还有更多），当用户向下滚动到表的末尾时，再添加一些行。

就像Twitter一样。

Answer 5

我们最终决定的解决方案是实施分页。

浏览器性能不佳，取消隐藏大型（> 1000行，20列）表

5 个答案: