javascript - 浏览器性能不佳，无法隐藏大型(>1000 行，20 列)表

Question

我有一个页面使用 jQuery tabs对一组 HTML 表格进行制表。我们注意到，当表具有大量(>1000)行时，选项卡之间的性能切换可能会很差。

经过一些分析，结果发现性能不佳与选项卡 showTab 中的 $show.removeClass( "ui-tabs-hide"); 行有关> 功能。

这已通过一个简单的网页得到了证明，该网页包含一个包含 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

问题出在 table 上。 1000 个 TR * 然而，许多 TD 是浏览器需要重新渲染的很多 DOM 元素。

我唯一能想到的尝试是不要交换显示CSS属性，而是尝试将表格放置在屏幕外以“隐藏”它。

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

尽管如此，这是一个巨大的表，因此真正的解决方案可能是重新设计页面本身。也许不要在页面上使用选项卡，并让用户在其自己的浏览器选项卡或其他内容中启动每个页面。