HTML DOM Drawing Transaction in Javascript? - Stack Overflow

admin管理员组

文章数量:1429444

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

Share Improve this question Follow asked Aug 28, 2011 at 12:45 duality_duality_ 18.8k2424 gold badges8484 silver badges9696 bronze badges 1

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

本文标签： HTML DOM Drawing Transaction in JavascriptStack Overflow