javascript - 设置 DOMElement 边界的最快方法是什么？

Question

目前，要在 DOM 中放置绝对元素，我使用:

this.myObject.style.left = aValue1 + 'px' ;
this.myObject.style.top = aValue2 + 'px' ;
this.myObject.style.width = aValue3 + 'px' ;
this.myObject.style.height = aValue4 + 'px' ;

是否有更好的(对于浏览器来说更快)的方法来做到这一点？

此外，也许我可以从 DOM 中删除该元素并在之后重新附加？

感谢您的回答。

Answer 1

这里有一个关于此的主题 Create Document Fragment .

在我看来，你正在做的事情很好，但如果你做了很多，那么你可能会考虑将节点从主 html 中取出，然后将其放回原处。特别是如果你正在做很多更改在一个节点上。

替换节点速度更快，因为浏览器会针对每次 dom 操作重排页面。当节点仍在 dom 中时，节点上的每次更改都是多次回流。一堆操作然后插入更改的节点只是一次回流。

编辑:关于此的一篇好文章:The new game show: “Will it reflow?”

如果有很多需要更新，克隆特定节点可能是最快的。如果只是一个或几个节点，则更新可能无法从克隆或删除和替换中受益。