我读到document.appendchild()是移动DOM元素的好方法，因为它将它们保存在内存中，但是检查浏览器，我注意到移动的元素正在重新绘制。有没有办法避免这种情况？也许不使用 appendChild，而是另一个允许移动元素而无需重新绘制它们的函数？
我找到的最佳解决方案是使用 transform：translate，但这不是我想要的，这只是在屏幕上移动元素，它不会改变它在 DOM 中的位置。
一般来说，重新粉刷的最佳方法不是取消它，而是优雅地处理它。
最终目标是尽可能限制对 DOM 的更改，这似乎是您的目标。
在移动元素方面，这当然取决于您的元素，但您需要确保有关如何添加元素的一些事情。
- 为不需要页面重排的元素建立目标。如果你能在移动元素之前做到这一点，你的状态会更好。
- 确保包含对 DOM 的实际更改，并尽可能通过 CSS 批量完成动画。听起来您正在通过翻译来处理这个问题，这影响较小，因为它不会更改 DOM。
- 若要实现将元素实际移动到 DOM 中的新位置的目标，在将元素转换为其新位置后，您应该能够将其副本追加到新位置，然后删除旧的已转换元素，而无需更改页面的任何像素。
最终，这不会消除页面重绘，但您应该能够在很大程度上消除页面重排，并在此过程中大大减少重绘。
万一有帮助，我就想不起来了。将下面的 CSS 属性设置为元素可能会避免重新绘制整个 DOM
.element {
will-change: transform;
transform: translateZ(0);
}