Is there a way to encapsulate several DOM manipulating mands in a transaction so that the content would not "flicker about"? Something like this:

window.stopDrawing(); // start transaction
$("#news").append("<div>a new news item</div>");
// ... do something more
$("#news").css("top", "-150px");
window.startDrawing(); // stop transaction

Is there a way to encapsulate several DOM manipulating mands in a transaction so that the content would not "flicker about"? Something like this:

window.stopDrawing(); // start transaction
$("#news").append("<div>a new news item</div>");
// ... do something more
$("#news").css("top", "-150px");
window.startDrawing(); // stop transaction

• javascript
• drawing

• 1 Browsers (newer ones) do this already, internally, to the extent that they can. There's no explicit control however. If you post more about a particular situation you're seeing, somebody may be able to suggest an optimization. – Pointy Commented Aug 28, 2011 at 12:51

2 Answers 2

Everytime you must update a large set of elements just set up a function including all the operations, call mozRequestAnimationFrame(or webkitRequestAnimationFrame), only after your function is finished executing pletely it will draw your changes to the screen.

More at: https://developer.mozilla/en/DOM/window.mozRequestAnimationFrame

I believe browsers are redrawing the document only when the script returns to the even loop, so it won't renders anything until the end of your script.

Anyway some operations may force the browser to do some costly operations such as reputing the dimensions of elements on the document (e.g. when retrieving the dimensions of an element after some DOM manipulations have been made). So you should do DOM manipulations off-document as much as possible.

If you have many manipulations to do on some element, it may be cheaper to remove it from the document tree, do your manipulations, and add it to the tree again.