Question

我正在使用JavaScript构建图表组件。它有两个单独渲染的图层：前景和背景。

确定所需的背景大小：

渲染前景
测量结果的高度
渲染前景和背景一起

在代码中它看起来像这样：

var foreground = renderForegroundIntoString();
parentDiv.innerHTML = foreground;
var height = parentDiv.children[0].clientHeight;
var background = renderBackgroundIntoString(height);
parentDiv.innerHTML = foreground + background;

使用IE7，这是小菜一碟。但是，Firefox2并不是真的愿意立即渲染parentDiv.innerHTML，因此我无法读出前景高度。

Firefox何时执行渲染，如何延迟背景生成直到前景渲染完成，或者有没有其他方法来确定前景元素的高度？

[在测试Dan的答案之后附上（thanx Dan）]

在回调方法的主体内（由setTimeout(...))回调，我可以看到，innerHTML的呈现仍然不完整。

Answer 1

你永远不应该依赖刚刚插入到下一行代码渲染的DOM中的东西。所有浏览器都会在一定程度上将这些更改组合在一起，找出何时以及为什么这样做可能很棘手。

处理它的最好方法是执行第二部分以响应某种事件。虽然它看起来不像你可以在那种情况下使用的那么好，但是如果失败了，你可以触发第二部分：

setTimeout(renderBackground, 0)

这将确保在执行代码的第二部分之前完成当前线程。

Answer 2

我不认为你想要parentDiv.children [0]（孩子们不是FF3中的有效属性），而是你想要parentDiv.childNodes [0]，但请注意这包括可能没有高度的文本节点。你可以尝试循环等待parentDiv的后代像这样渲染：

function getRenderedHeight(parentDiv) {
if (parentDiv.childNodes) {
  var i = 0;
  while (parentDiv.childNodes[i].nodeType == 3) { i++; }
  //Now parentDiv.childNodes[i] is your first non-text child
  return parentDiv.childNodes[i].clientHeight;
  //your other code here ...
} else {
  setTimeout("isRendered("+parentDiv+")",200);
}
}

然后在设置innerHTML后调用：getRenderedHeight（parentDiv）。

希望无论如何都会提出一些想法。

Firefox中的渲染顺序

2 个答案: