Internet Explorer 中的渐进式表格呈现

Question

我正在尝试在 Internet Explorer 中逐步呈现表格。它在 Firefox 中逐步呈现 - 但在 IE 中。它将它呈现在内存中，因此表格需要更多时间才能显示出来。

我在表格中添加了一个固定布局，并设置了一个 colgroup/col -

这就是代码的样子（我正在用 C# 构建它并使用引导程序）：

sb.Append("<table class='table table-condensed small table-hover table-bordered' style='table-layout: fixed;'>");
sb.Append(@"<colgroup span=13>
             <col width='350'>
             <col width='*'>
             <col width='*'>
             <col width='*'>
             <col width='*'>
             <col width='*'>
             <col width='*'>
             <col width='*'>
             <col width='*'>
             <col width='*'>
             <col width='*'>
             <col width='*'>
             <col width='*'>
               </colgroup>");

Answer 1

您不能使用 C# 代码进行渐进式 HTML 渲染。您的所有 C# 代码都将在页面发送到服务器之前执行。

Answer 2

您的 html 组合代码将在服务器上执行，然后组合的 html 将立即发送到您的浏览器作为响应。您在 Firefox 中看到的渐进式渲染只是一种错觉，因为 html 响应流开始并且数据流向 Firefox，它开始渲染。然而 IE 首先完全验证 html 直到表格的结束标记然后呈现它。

要进行渐进式 html，您可以使用潜水而不是表格。这是一种更有效的方法，通过让您的设计响应式设计，您将能够从引导程序中获得真正的好处。

如果 table 是您唯一的选择，那么您应该指定 table-layout CSS 属性以实现 Internet Explorer 5 或更高版本的最佳性能。通过执行以下操作，您将允许 Internet Explorer 在接收到所有数据之前开始呈现表格。

• 将 table-layout CSS 属性设置为固定在桌子上。
• 为每一列显式定义 col 对象。
• 在每个列上设置 WIDTH 属性。

在https://msdn.microsoft.com/en-us/library/ms533020(VS.85).aspx#Use_Fixed-Size_Tables查看更多详情

Answer 3

由于 IE 将整个 html 块呈现为整个表格，因此只有在 IE 完成对 Asad Mehmood 所指出的封闭标记的验证时才会加载该表。而是使用 div。