javascript - 操作“虚构”元素是否比当前在 DOM 中的元素更快？

Question

假设我正在使用 jQuery 循环并在现有网页元素上执行一些操作。需要进行多项更改，集合中的元素数量至少有些大，元素结构有些复杂。

假设我将所有元素放入同一个 jQuery 对象中，使用 jQuery 的 .clone （或 .detach ）方法创建一个“想象的”副本来处理，删除当前元素，然后重新插入更改的副本会更快吗进入DOM？

...或者这没有什么不同——因为实时 DOM 元素的操作速度与非 DOM 元素一样快？

Answer 1

您可以克隆该对象或创建新的文档片段。对该新对象进行更改并在 DOM 中替换它： https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode https://developer.mozilla.org/en-US/ docs/Web/API/document.createDocumentFragment

处理不属于 DOM 的对象不会触发任何绘制/重排。如果性能是一个问题，请不要使用 jQuery，请使用普通的旧 Javascript，因为 cloneNode 和 createDocumentFragment 都得到了很好的支持。

Answer 2

是的，实际上，尽管您的里程可能会有所不同。

当元素可见时，操作将导致浏览器重绘页面。许多重绘可能会对性能造成重大影响。

当元素不可见时，不会触发重绘。

大规模元素克隆可能非常昂贵，所以如果可能的话我会避免这样做。