回流和重涂之间有什么区别？

Question

我对重排和重绘之间的区别还不清楚（如果有任何区别）好像重排可能正在转移各种DOM元素的位置，其中重画只是呈现一个新对象。例如，在移除元素时将发生回流，而在更改其颜色时将发生重新绘制。这是真的？

Answer 1

DOM布局发生更改时，就会发生重排。回流在计算上非常昂贵，因为必须再次计算页面元素的尺寸和位置，然后才能重新绘制屏幕。

可能导致回流的示例

for (let i = 1; i <= 100; i++ {

const newEle = document.createElement('p');

newEle.textContent = 'newly created paragraph element';

document.body.appendChild(newEle);

}

上面的代码效率很低，每个附加的新段落元素都会导致100个重排过程。

您可以使用以下方法缓解此计算压力大的过程 .createDocumentFragment()

const docFrag = document.createDocumentFragment();

 for (let i = 1; i <= 100; i++ {

    const newEle = document.createElement('p');

    newEle.textContent = 'newly created paragraph element';

    docFrag.appendChild(newEle);

    }

document.body.appendChild(docFrag);

上面的代码现在将只使用重排过程1x来创建100个新的段落元素。

重绘只是监视器上像素的变化，同时还要加重它的两个弊端，因为重排在其过程中包括重绘。