IE不正确地呈现动态内容,直到更改样式表

Question

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

如果我通过清空表并逐渐添加行来生成数据,这可以正常工作.但是,此表可能有数千行,并且生成浏览器为用户提供的表可能需要很长时间"这个脚本需要很长时间才能执行"错误.所以我通过将表生成分成块并使用一次做一点来解决这个问题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每一个我在铺设完出表的时候,和这个工作.

我的问题是,当我尝试打印页面时,行是空白的,因为页面内容不正确地呈现给打印机.

所以我会尝试更多的技巧,可能只是切换显示哪个表并交换他们的ids或其他什么使这个工作.我的问题是,这里发生了什么？这似乎是IE中的一个错误; 我正在使用IE8,但同样的事情发生在IE6和IE7上.我想避免将来陷入这个坑,但我不确定是什么导致这个,所以我不确定我应该避免什么.任何人都可以放弃的任何亮点都将非常感激.

编辑:交换显示哪个表使得渲染问题在浏览器中消失而不需要样式表黑客,但打印问题仍然存在.实际上,即使直接生成表而没有显示/隐藏或元素移动技巧,打印问题也存在.所以我很困惑,不知道我能做些什么来解决这个问题.如果我无法解决这个问题,我可能不得不制作一个单独的静态页面用于打印.

Answer 1

没有测试用例不能确定，但​​总的来说：

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

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

• 我认为通过使用innerHTML编写行，您应该能够足够快地摆脱基于超时的部分更新（这似乎具有令人讨厌的潜在竞争条件）。当然，基于 DOM 的替代方案是仅更新已更改的行。当您使用固定布局时，由于宽度不取决于内容，因此您可以将表格依次分成多个表格。它们看起来就像是一个表，但您可以单独处理每个表，要么一次性编写其innerHTML，要么追加其行，而不会因单个表中包含数千行而导致 DOM 性能下降。