javascript - 是否有 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 秒。

我的理论是，由于在尝试使用 DOM 之前，IE 未通过 .html() 调用将 DOM 完全呈现到屏幕上，因此会发生某种锁定。

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

Answer 1

您的分析几乎就在现场。让我尝试解释一下为什么 setTimeout 会产生影响。

如果你看看这个很棒的article关于 DOM 渲染，您将了解 .html() 将导致发生回流。

现在在接下来的两行中，您正在占用浏览器的渲染线程。浏览器可能会选择等到脚本执行完成后再尝试重排(以避免多次重排或缓冲所有更改)。

解决方案 - 我们需要告诉浏览器我们的 html 更改已完成，您可以完成渲染过程。方法 - 1) 结束脚本 2) 使用 setTimeout 将执行交给浏览器。

执行延迟为 0 毫秒的 setTimeout 也有效，因为 setTimeout 基本上放弃了对 sript block 的控制。动画相关脚本如此依赖setTimeout 和setInterval 的原因之一。

另一个潜在的改进是使用 documentFragments，John Resig 简要解释了 here

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