CODEWITHSUNDEEP
javascriptjqueryhtmldom
Alex Kerr
Alex Kerr

Reputation: 1090

How to stop browser redrawing until DOM manipulation complete?

At various points in my 1-page web app I want to do some fairly heavy DOM manipulation, moving various divs around (which each have lots of sub-elements). I don't want the browser trying to repeatedly redraw the page mid-manipulation. Is there a way to say to the browser "pause redrawing until I give the go ahead"?

requestAnimationFrame() seems like one candidate, but is that suitable for DOM rearranging, or just for animation? Are there any other things I could do?

Thanks

Upvotes: 2

Views: 903

Answers (1)

JPA
JPA

Reputation: 523

You can try using documentFragment.

  1. Create the documentFragment.
  2. Write everything into a documentFragment first.
  3. When done, replace DOM content with documentFragment.

Then the manipulation does not take place on-the-fly, you use the documentFragment as a sort of buffer.

Upvotes: 1

Related Questions