What's the fastest way to set DOMElement bounds?

Question

Currently, to place an absolute element in DOM, I use :

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

Is there a better (quick for browsers) way to do this ?

Also, maybe do I remove the element from DOM and re-append after ?

Thanks for your anwsers.

Answer 1

There is a topic about this here Create Document Fragment .

In my opinion what you're doing is fine, but if you're doing it a lot then you might consider taking the node out of the main html then putting it back in. Especially if you are doing a lot of changes on one node.

Replacing the node is faster because the browsers reflow the page for every dom manipulation. Each change on the node while it's still in the dom is that many reflows. A bunch of manipulations and then inserting the changed node is only one reflow.

Edit: An good article about this: The new game show: “Will it reflow?”

Cloning the specific nodes would probably be the fastest if there are a lot to update. If it's just one or a couple nodes the update may not benefit from cloning or removal and replace.