是否有 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 会产生这种差异。

如果你看看这个伟大的关于 DOM 渲染的文章，你就会明白 .html()将导致回流发生。

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

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

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

另一个潜在的改进是使用 documentFragments，John Resig 此处< /a>

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

Answer 2

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

确保图像在 src 中有一个唯一的标识符，这样它就不会被缓存...

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

B

Answer 3

调用 setTimeout 会将给定函数至少延迟指定的时间，但在当前脚本执行完成之前绝不会运行。也就是说，您可以将超时替换为 0 秒。

另一种可能值得尝试的方法是访问生成内容的某些布局属性（例如 StoreDetailsContainer 的高度）。这样，您可以强制 IE 在将控制权返回给脚本之前完成渲染，因为它只能在完成计算布局后提供脚本请求的正确值。

第三个可能有帮助的猜测是，您确保使用页面布局来解析 HTML。这将防止一遍又一遍地绘制半完成的布局。为此，您可以在调用 html 之前从 DOM 中分离 StoreDetailsContainer 元素。现在，IE 进行了构造 DOM 的更改，而不影响布局。之后，您将 StoreDetailsContainer 重新附加到 DOM 中。与普通的 innerHTML 集相比，这种容器的分离和重新附加允许您控制何时解析 HTML 以构建 DOM 树以及何时计算布局。

Answer 4

试试这个代码。加载事件在就绪事件之后触发，因此它可以工作。

$(document).ready(function(){
  $("#StoreDetailsContainer").html($(tableHtml))
  });
$(window).load(function(){
  $("#StoreDetailsTable").tablesorter({ sortList: [[0, 0]], cssChildRow: "SubTable" }).filtertable({ cssChildRow: "SubTable" });
  });

Answer 5

我认为它可以这样工作：

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