是否有IE渲染完成事件？

Question

在尝试确定页面加载20秒的原因时,我在IE8中发现了一些奇怪的行为.

情景是这样的.

我做了一个ajax调用,它返回并且回调看起来像这样

$("#StoreDetailsContainer").html($(tableHtml));
var StoreDetailsTable = $("#StoreDetailsTable");
StoreDetailsTable.tablesorter({ sortList: [[0, 0]], cssChildRow: "SubTable" });
StoreDetailsTable.filtertable({ cssChildRow: "SubTable" });

但是,这段代码需要20秒才能完成.

我正在乱搞,计时,并在方法之间弹出警报,突然间,只用了6秒钟.我玩了一下,发现如果我在.html()调用之后引入延迟,并且在我尝试操作DOM之前,页面渲染速度更快.它现在看起来像这样

$("#StoreDetailsContainer").html($(tableHtml));
window.setTimeout(function() {
    var StoreDetailsTable = $("#StoreDetailsTable");
    StoreDetailsTable.tablesorter({ sortList: [[0, 0]], cssChildRow: "SubTable" });
    StoreDetailsTable.filtertable({ cssChildRow: "SubTable" });
}, 100);

尽管在该过程中添加了额外的1/10秒,它也只需要6秒.

我的理论是,因为.html()在尝试使用它之前,IE没有通过调用完全呈现给屏幕,所以会发生某种锁定.

有没有办法确定IE何时完成渲染添加到DOM的内容.html()所以我不需要在setTimeout调用中使用任意值？

Answer 1

你的分析几乎就在现场.让我试着解释为什么setTimeout会有所作为.

如果你看看这个伟大的文章有关DOM渲染,你会明白,.html()会引起回流发生.

现在接下来的两行,正在发生的事情是你正在占用浏览器的渲染线程.在尝试重排之前,浏览器可以选择等待脚本执行完成(以避免多次重排或缓冲所有更改).

解决方案 - 我们需要告诉浏览器我们的html更改已完成,您可以完成渲染过程.这样做的方法 - 1)结束你的脚本2)setTimeout用来产生浏览器的执行.

执行setTimeout0ms延迟也有效,因为setTimeout基本上放弃了对sript块的控制.动画相关脚本如此依赖setTimeout和依赖的原因之一setInterval.

另一个潜在的改进是使用documentFragments,John Resig 在这里简洁地解释

我认为将这两者结合起来会产生更快的速度,但当然,在完成分析之前无法知道!

Answer 2

您可以将单个像素图像添加到回调响应中，在 .html(..) 之后从 DOM 获取该图像并附加到其 onload 事件。我无法想象在浏览器渲染图像之前，图像的 onload 事件可能会触发。

确保图像在 src 中具有唯一标识符，以便它不会被缓存...

不过，你遇到了奇怪的问题 - 我相信有人会提供更优雅的解决方案:)

乙