在Firefox中渲染順序

Question

我使用JavaScript構建圖表組件。它有兩層分別渲染：前景和背景。

爲了確定背景的所需尺寸：

1. 呈現前景
2. 測量結果
3. 呈現前景和 背景一起

在代碼的高度它看起來像這樣：

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何時執行渲染以及如何延遲我的背景生成直到前景渲染完成，或者是否有任何其他方式來確定我的前景元素的高度？

在回調方法（由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); 
} 
} 

，然後通過調用：getRenderedHeight（parentDiv）設置的innerHTML後。

希望能給出一些想法，無論如何。