设置 DOMElement 边界的最快方法是什么？答案

【问题标题】：What's the fastest way to set DOMElement bounds?设置 DOMElement 边界的最快方法是什么？
【发布时间】：2012-10-20 06:00:12
【问题描述】：

目前，为了在 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 中删除元素并在之后重新附加？

感谢您的回答。

【问题讨论】：

我真的认为你做的是最好的，因为现在主流浏览器都有非常强大的图形优化器。实际上，任何一种自制的棘手技巧都可能会减慢这个过程。

标签： javascript performance dom browser

【解决方案1】：

这里有一个关于这个的话题Create Document Fragment。

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

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

编辑：一篇很好的文章：The new game show: “Will it reflow?”

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

【讨论】：