设置DOMElement边界的最快方法是什么?

时间:2012-10-30 20:02:08

标签: javascript performance dom browser

目前,要在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中删除元素并在之后重新追加?

谢谢你的赞美诗。

1 个答案:

答案 0 :(得分:1)

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

在我看来你正在做的事情很好,但如果你做的很多,那么你可以考虑从主html中取出节点然后把它放回去。特别是如果你做了很多改变在一个节点上。

更换节点的速度更快,因为浏览器会针对每个dom操作重排页面。当节点仍处于dom状态时,节点上的每次更改都是许多回流。一堆操作然后插入更改的节点只有一个回流。

修改:关于此问题的好文章:The new game show: “Will it reflow?”

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