javascript – 当某些内容被附加到内存中的DOM时,是否会导致浏览器重排？

当某些内容被附加到内存中的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;并在每个循环完成后显示.

基本上,我想知道的是,当屏幕像素被告知改变时,浏览器是否才开始重排？

顺便说一句,代码仅用于示例目的而不是生产中,所以不要因为任何逻辑错误而抨击我.谢谢你的任何建议.

解决方法

Basically,what I want to know is,does the browser only start to reflow when the pixels of the screen are told to change?

不,当DOM发生变化时,浏览器会重新流动.之后,它将重新绘制(告诉屏幕上的像素改变).

有关详细信息,请查看this dev.opera.com article和问题When does reflow happen in a DOM environment?.

简而言之：当然有优化后续DOM更改,例如,如果在循环中插入元素数组.我不希望你的案例1和2明显不同.

只有在进行非常繁重的DOM更改时,您才需要使用案例#3.这使得回流(如果它们在插入循环期间发生)在遇到隐藏元素时停止,因此它们基本上被阻止.但是,循环前后的两次显示更改可能会导致某些浏览器出现闪烁.