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

Question

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

我发现的最佳解决方案是使用transform：translate，但这并不是我正在寻找的，这只是在屏幕上移动元素，它不会改变它在DOM中的位置。

Answer 1

一般来说，重画的最佳方法不是废除它，而是要优雅地处理它。

最终目标是尽可能限制对DOM的更改，这似乎是您的目标。

在移动元素方面，它肯定取决于你的元素，但你想要确保一些关于你如何添加元素的事情。

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

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

Answer 2

如果它有所帮助，请放下我的想法。将以下CSS属性设置为元素可能会避免重新绘制整个DOM

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