javascript - IE 不正确地呈现动态内容，直到进行样式表更改

Question

我有一个用 Javascript 动态生成的数据表。每隔几分钟，页面就会通过发出 Ajax 请求、从服务器取回数据并替换表中的数据来刷新数据。这是非常标准的，表格最终看起来像这样:

如果我通过清空表格并逐渐添加行来生成数据，这就很好用了。但是，这个表格可能有数千行，并且可能需要很长时间才能生成浏览器提供的表格用户出现“此脚本执行时间过长”错误。因此，我通过将表生成分成 block 并使用 setInterval 一次执行一点来解决此问题。

这工作得很好，但因为表格可能需要一段时间才能完全生成，所以我试着聪明地做一些伪双缓冲。我有第二个表，其 display 设置为 none 以隐藏它，当我重新生成表时，我将行添加到隐藏表中时间。这样，现有数据对用户可见，直到表重新生成完成，此时我们只需一次性将其全部替换为我们的新内容。

我正在使用以下代码行进行替换

$("#loading_area tbody").children().appendTo( $("#unplanned tbody").empty() );

这在 Firefox、Safari 和 Google Chrome 上工作得很好。但是在 IE 上，我得到以下信息:

这些行实际上不是空白的——如果我水平滚动足够多，内容就在那里:

第一列似乎超过了 55,000 像素宽!这是真正奇怪的部分:只要我更改了有关表格样式的任何内容，内容就会重新正确显示。因此，如果我将字体颜色更改为绿色，IE 将立即正确地重新呈现表格。

但我无法直接进行更改。所以如果我说

$("#unplanned").css("color", "green");

然后它就不能正确地重新渲染；颜色发生变化，但第一列保持 55,000 像素宽。但是如果我直接对样式表进行更改

document.styleSheets[1].rules[3].style.color = "green";

然后它会正确地重新呈现表格。

所以我最终通过随机更改样式来解决这个问题，每次我在 1px 和 0px 之间切换展开/折叠按钮的边距完成了 table 的布置，这成功了。

我的问题是，当我尝试打印页面时，行看起来是空白的，因为页面内容未正确呈现给打印机。

所以我会尝试更多的技巧，可能只是切换显示哪个表并交换它们的 id 或任何让它起作用的东西。我的问题是，这是怎么回事？这似乎是 IE 中的一个错误；我使用的是 IE8，但同样的事情也发生在 IE6 和 IE7 上。我想避免将来掉进这个坑，但我不确定是什么原因造成的，所以我不太确定我应该避免什么。任何人都可以对此有所了解，我们将不胜感激。

编辑:交换显示的表格使渲染问题在浏览器中消失而无需样式表 hack，但打印问题仍然存在。事实上，即使表格是直接生成的，根本没有显示/隐藏或元素移动技巧，打印问题仍然存在。所以我很困惑，不确定我能做些什么来解决这个问题。如果我无法解决这个问题，我可能不得不制作一个单独的静态页面来打印。

Answer 1

没有测试用例就不能肯定地说，但总的来说:

• 确保您使用的是 table-layout: fixed。 IE 不擅长猜测 auto 列宽，尤其是涉及到 colspans 时。当有很多行时，猜测宽度也很慢。通过使用固定的表格布局为每一列设置明确的大小，摆脱 IE 的控制。

• 避免将行附加到大型表格。当你说 children().appendTo() 时，jQuery 仍然每次都追加一个，这很快就会变得非常慢。要加快表格操作，您可以做的最好的事情是在表格的父元素上使用 innerHTML 一次设置所有内容。当然，如果您想插入数据(属性值和内容)，准备 HTML 字符串可能会很烦人，因为它必须经过 HTML 转义。一种解决方法是使用占位符值一次写入所有行，然后在第二遍通过在文本节点上设置 .data 等来填充真实数据。您也需要重新附加您在此步骤中放置在这些按钮上的所有事件处理程序，除非您使用的是 live。

• 我认为通过使用 innerHTML 编写行，您应该能够加快速度以消除基于超时的部分更新(这似乎具有令人讨厌的潜在竞争条件)。当然，基于 DOM 的替代方法是只更新已更改的行。当您使用固定布局时，由于宽度不依赖于内容，您可以将表格拆分成多个表格。它们看起来像是一个表，但您可以分别处理每个表，要么一次编写其 innerHTML，要么附加其行，而不会因单个表中有数千行而导致 DOM 性能下降。