当某些内容被附加到内存中的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 文章和问题When does reflow发生在 DOM 环境中？。

简而言之：当然可以对后续 DOM 更改进行优化，例如，如果您在循环中插入元素数组。我不认为你的情况 1 和 2 有明显的不同。

仅当您正在进行大量 DOM 更改时，您可能需要案例 #3。这使得回流（如果在插入循环期间发生）在遇到隐藏元素时停止，因此基本上可以防止它们。然而，循环前后的两次显示变化可能会导致某些浏览器中出现闪烁。