html - Firefox 在呈现大型 html 表格(20,000 多行)时崩溃

Question

我知道渲染这么大的表格会挑战任何浏览器的极限。但是，我很好奇为什么一个非常大的表(20,000 多行)会使 Firefox 崩溃，而所有其他浏览器都相对较快地呈现它。

我正在使用 ASP.NET 并使用 Response.Write 将表格 html 直接写入缓冲区。我最初以为我可能生成了一些格式错误的 html，所以我决定用 gridview 重新创建表格。事实证明，这会进一步降低 Firefox 的速度，但在其他主要浏览器中的渲染时间只会稍微慢一些。

Firefox 可以很好地创建前(大约)10,000 行。问题是在那之后，它非常缓慢地添加剩余的行，直到应用程序变得无响应，同时使用越来越多的内存(300MB+)。 Internet Explorer 仅使用大约 30MB。

我使用的是最新版本的 Firefox，并且在测试时我的所有附加组件都被禁用了。另外，我从页面中删除了所有 css 和 javascript。

这是 firefox 的已知问题吗？还有其他人经历过吗？可以采取哪些步骤来解决问题或至少开始进行故障排除？

编辑我知道在一个页面上有这么多表格行是一种糟糕的 UI 设计实践。感谢所有指出这一点的人，但这不是我的问题。为了进一步澄清，我只是好奇为什么这适用于除 Firefox 以外的所有浏览器。

Answer 1

尝试用固定宽度定义表格

<table style='table-layout:fixed'>

这将允许浏览器在不尝试重新计算每个新行添加的宽度的情况下呈现表格。

[更新]

我不确定你的数据是什么样的，但我可以做

<table style='table-layout:fixed'>
<tr><td style="width:150px;"></td><td style="width:150px;"></td><td style="width:150px;"></td><td style="width:150px;"></td><td style="width:150px;"></td></tr>
<%
    for (int ix = 0; ix < 30000; ix++)
    {
        Response.Write("<tr>");
        Response.Write("<td><img src='stickman1.bmp'></td>");
        Response.Write("<td>" + RandomString() + "</td>");
        Response.Write("<td><img src='stickman2.bmp'></td>");
        Response.Write("<td>" + RandomString() + "</td>");
        Response.Write("<td><img src='stickman3.bmp'></td>");
        Response.Write("<td><a href='#' onclick='blah();'>stick man!</a></td>");
        Response.Write("</tr>");
    }

 %>
 </table>

在 Firefox 3.0.11 中。虽然需要一段时间 firefox 会显示它。它消耗了 239MB 的内存。 RandomString() 只返回 0 - 22 个字符的字符串。