使用js函数document.appendchild时，有没有办法避免浏览器重绘？

我读了document.appendchild（）是移动DOM的元素，因为它保留在内存中，但检查浏览器中，我注意到，移动的元素被重新绘制的好方法。有没有办法避免这种情况？也许不使用appendChild，但另一个允许移动元素而不重绘它们的函数？使用js函数document.appendchild时，有没有办法避免浏览器重绘？

最好的解决方案，我已经找到了使用变换：翻译，但是这不正是我要找的，这只是移动元素在屏幕上左右，它不会改变它在DOM位置。

来源

2017-04-07 DsEsteban

我不明白如何移动元素和* not * repaint有意义。如果你不想要它变得可见的事实，你为什么要移动它？ – nnnnnn

您的目标是最大限度地减少重新绘制或完成没有重新绘制的操作？除非你的元素没有用户界面，否则会有一定程度的重绘。 –

我误解了这个问题，但@nnnnnn是正确的，移动元素本身就是重绘。 –

在一般情况下，重新粉刷，最好的办法是不要做掉它，但有风度来处理它。

的最终目标是限制更改DOM尽可能多地，这似乎是你的目标。

在移动元素的方面，它肯定取决于你的元素，但是你要确保你如何添加元素的几件事情。

建立一个不需要页面重排的元素的目的地。如果您在移动元素之前可以做到这一点，那么您的状态会更好。
确保包含DOM的实际更改，并尽可能通过CSS批量完成动画。听起来你正在通过翻译来处理这个问题，因为它不改变DOM，所以影响较小。
为了实现将元素实际移动到DOM中新位置的目标，在将元素转换为新位置后，应该能够将其副本附加到新位置，然后移除旧的翻译元素而不需要改变页面的任何像素。

最终，这不会消除页面重绘，但你应该能够很大程度上消除页面重排，并在此过程中大大减少重新绘制。

来源

2017-04-07 06:41:25

只是把我的心，以防它帮助。将下面的CSS属性设置为元素可能会避免重新绘制整个DOM

.element { 
    will-change: transform; 
    transform: translateZ(0); 
}

来源

2017-04-07 10:24:13

使用js函数document.appendchild时，有没有办法避免浏览器重绘？

回答

相关问题