當某些內容被附加到內存中的DOM時，是否會導致瀏覽器重排？

Question

當某些內容被附加到內存中的DOM時，是否會導致瀏覽器重排？ 或者僅當屏幕上的像素被告知要改變回流發生時？ 例如：

案例1： Img元素一次附加到DOM

var parentDiv = $('#imgHolder');
var imgArray = []; // Array of img paths populated in another function

$.each(imgArray, function()
{
    parentDiv.append(createImgEle(this)); // createImgEle() // returns an <img> with the right src
}

情況2： Img元素放在一個單獨的數組中，然后附加到DOM

var parentDiv = $('#imgHolder');
var imgArray = []; // Array of img paths populated in another function
var tempArray = []; // Holds the img elements until its fully populated

$.each(imgArray, function()
{
    tempArray.push(createImgEle(this));
}
parentDiv.append(tempArray);

案例3：案例1或2，但默認情況下，parentDiv設置為display:none; 並在每個循環完成后顯示。

基本上，我想知道的是，當屏幕像素被告知改變時，瀏覽器是否才開始重排？

順便說一句，代碼僅用於示例目的而不是生產中，所以不要因為任何邏輯錯誤而抨擊我。 謝謝你的任何建議。

Answer 1

基本上，我想知道的是，當屏幕像素被告知改變時，瀏覽器是否才開始重排？

不，當DOM發生變化時，瀏覽器會重新流動。 之后，它將重新繪制（告訴屏幕上的像素改變）。

有關詳細信息，請查看此dev.opera.com文章以及問題何時在DOM環境中進行重排？ 。

簡而言之：當然有優化后續DOM更改，例如，如果在循環中插入元素數組。 我不希望你的案例1和2明顯不同。

只有在進行非常繁重的DOM更改時，您才需要使用案例＃3。 這使得回流（如果它們在插入循環期間發生）在遇到隱藏元素時停止，因此它們基本上被阻止。 但是，循環前后的兩次顯示更改可能會導致某些瀏覽器出現閃爍。