Question

据我所知，渲染这么大的表正在推动任何浏览器的极限。但是，我很好奇为什么一个非常大的表（20,000多行）会崩溃Firefox，而所有其他浏览器都会相对快速地渲染它。

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

Firefox创建第一个（大约）10,000行就好了。问题是在此之后，它会非常缓慢地添加剩余的行，直到应用程序变得无响应，同时使用越来越多的内存（300MB +）。 Internet Explorer仅使用大约30MB。

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

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

EDIT 我知道在页面上有这么多表行是一个可怕的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行表，那么可怜的旧笔记本电脑就会死掉。它是一个4gb内存的核心：P

Answer 3

编辑：根据您在评论中披露的内容，我建议问题更可能与您的数据有关而不是表格。您必须使用不同的数据，元素和布局技术执行一些测试，以确定问题所在。我特别想找：

object，iframe或native元素（包括表单元素）。
重复的ID属性
未转义的实体
标记，尤其是</td>, </tr> and </table>
colspans

嗯..似乎表明你没有使用有效的html（不关闭行或其他东西）。通过验证器运行表的子集。

table-layout：fixed（每个Jack的答案）应该呈现直到它崩溃。看起来它事先并不知道关于桌子的东西（比如它的宽度）。尝试将宽度设置为像素值并使用col元素。

<table style='table-layout:fixed; width:800px'>
  <col style="width:200px">
  <col style="width:600px">
  <tr>
     ...

Answer 4

可能与您的数据有关吗？我刚刚创建了一个简单的ASP.NET页面，它创建了一个50k的行表，firefox渲染它就好了。

protected void Page_Load(object sender, EventArgs e)
{
    StringBuilder sb = new StringBuilder();
    sb.Append("<table><tbody>");
    for (int i = 0; i < 50000; i++)
    {
        sb.Append("<tr><td>My Name</td><td>my@email.com</td></tr>");
    }
    sb.Append("</tbody></table>");
    Response.Write(sb.ToString());
}

Answer 5

我建议将Pagination用于大小合适的数据集。 ExtJS有一个非常好的GridPanel，它易于实现（你可以查看示例的源代码以获得指导），如果你想要的东西不那么“极端”（如同，它不会改变）表格的外观，jQuery也有一些AJAX分页的东西。

Answer 6

另一个想法

信息需要多长时间才能发送？它是在服务器端缓冲的吗？可以与firefox的连接处理而不是渲染。

Answer 7

我认为问题的一个主要部分是Firefox（至少以前的版本，这个可能在读取此消息时已经修复）即使没有发生任何重大事件，也会自行使用大量内存。

加载大量数据意味着它需要比平常更多的内存和CPU资源，而且通常需要从系统中获取相当多的数据。因此，如果数据量巨大，它可以使用整个资源，而且Firefox足够礼貌而不会使计算机崩溃。

我猜想如果你在一个非常低端的系统上尝试这个，而不是一个有大量内存和快速CPU的高端系统，性能会有所不同。

当然，这也取决于你的崩溃意味着什么。崩溃的确切含义是它停止工作并退出，而你可能只是挂起它（它停止工作但不退出），在这种情况下它可能仍在工作但很难在你之前渲染页面失去耐心。

如果您在呈现页面之前手动关闭Firefox，它在技术上不会被视为崩溃，只是挂起或者用户没有耐心等待页面加载（当然，这是有限制的）任何人的耐心！）。

Answer 8

我有同样的问题。基本上，当显示表格时，Firefox滚动速度非常慢（30行，大约50列）。一旦表格不再可见，浏览器就会再次快速滚动。所以我想这是一个显示渲染或更新问题。

Answer 9

另外firefox并不是首选的浏览器 - html5标准，完全适用于Chrome和Opera，并不适用于Firefox

Firefox崩溃渲染大型html表（20,000多行）

9 个答案: