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'>

这将允许浏览器呈现表,而不会尝试重新计算每个新行添加的宽度.

[UPDATE]

我不确定你的数据是什么样的,但我能做到

<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个字符之间的字符串.

Answer 2

您可能想使用分页来解决这个问题:) 我想如果 Firefox 尝试渲染 20k 行表格，我那可怜的旧笔记本电脑就会死掉。它是 core2 和 4gb 内存 :P