当某些内容被附加到内存中的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。 这使得回流（如果它们在插入循环期间发生）在遇到隐藏元素时停止，因此它们基本上被阻止。 但是，循环前后的两次显示更改可能会导致某些浏览器出现闪烁。