Javascript Firefox中的渲染顺序

我正在用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

的呈现仍然没有完成

您永远不应该依赖刚刚插入到DOM中的东西被下一行代码呈现。在某种程度上，所有浏览器都会将这些更改组合在一起，并且很难确定更改的时间和原因

最好的处理方法是执行第二部分以响应某种事件。虽然在这种情况下，似乎没有一个好的方法可以使用，但如果失败，可以使用以下方法触发第二部分：

setTimeout(renderBackground, 0)

---

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

我认为您不需要parentDiv.children[0]（在FF3中，children不是有效属性），而是需要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); } } 函数GetRenderHeight（parentDiv）{ if（parentDiv.childNodes）{ var i=0； while（parentDiv.childNodes[i].nodeType==3）{i++；} //现在parentDiv.childNodes[i]是您的第一个非文本子节点 返回parentDiv.childNodes[i].clientHeight； //你的其他代码在这里。。。 }否则{ setTimeout（“isRendered（“+parentDiv+”），200）； } } 然后在设置innerHTML后通过：getRenderedHeight（parentDiv）调用

无论如何，希望这能给我们一些想法