How to freeze web browser's repaints while changing visibility of elements?

Question

Hello there,

I'm by far no JS developer (in fact, hardly developer at all :) but I wanted to try to write a small Greasemonkey script to hide few elements on a certain webpage. Once I've started dabbing at it, I've decided to use jQuery, just to make it easier. Everything went well, the script is working, but now that it's ready, I've started to wonder about the details.

As a part of the script, I need to find specific element and hide it, together with previous and next of its siblings. I've ended up with not that readable, but working line:

$('div#some-weird-box').prev().toggle(w).next().toggle(w).next().toggle(w);

My concern here is, that I'm removing three separate divs in three separate steps. This would cause browser to "repaint" the page three times, right? It's not a problem with three divs, it would probably start to matter when there are more elements. So, my question is - is there a way to tell browser "stop refreshing/redrawing the page"? If there is, I could use that, hide arbitrary number of elements, then ask browser to update the screen.

Answer 1

You can use cloneNode. After cloning you can do all manipulations over the clone and than replace original node. This will prevent your content from blinking when display:none like J-P proposed.

Answer 2

Javascript execution locks the browser and you will not see a repaint until your code execution is finished. You really have nothing to worry about with this.

I posted a good example of this on jsbin.com: http://jsbin.com/ecuku/edit

Update: Often it is suggested to modify nodes outside of the DOM because modifying the DOM does cause reflows (not repaints). Reflows are when the browser has to recalculate positions and sizes of elements on your page because something has changed. While your javascript execution can cause multiple reflows, it will only cause one repaint (when your code finishes). Those reflows can be a big performance hit, but for small numbers of DOM changes (e.g. your code only has 3) it probably isn't worth the work to do make your changes outside of the page. Also, cloning a node and modifying it outside of the page before inserting it back can have unexpected consequences. For example, if you had event handlers attached they would need to be reattached to the new nodes.