5

当某些东西附加到内存中的 DOM 时，会导致浏览器重排吗？还是只有当屏幕上的像素被告知要改变回流才会发生？例如：

案例 1：一次一个附加到 DOM 的 img 元素

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;并在每个循环完成后变为可见。

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

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

4

1 回答 1

3

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

不，浏览器会在 DOM 更改时重排。之后，它将重新绘制（告诉屏幕上的像素发生变化）。

有关详细信息，请查看此 dev.opera.com 文章和问题何时在 DOM 环境中发生回流？.

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

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

于 2013-02-08T22:40:11.013 回答