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

Question

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\'

Answer 1

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.

Answer 2

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.