[malandrew]

No discussion of repaint and reflow? You can't leave a discussion of those out when talking about the cost of DOM manipulation.

You absolutely can touch the DOM, but should do so through and interface that manages or eliminates repaint and reflow.

[ghostdiver]

I have same feeling,

Making single frame of JS code to run fast is cool and dandy, but eventually browser will have to make freeze and do reflow+repaint. Eventually it will make profiling harder, think about caching .offsetHeight etc. properties. It does decrease script execution time, but it does not make your app to work faster.

[jcampbell1]

The important trick to know is, don't mix DOM modification with DOM measurement. Measuring the DOM is what triggers the DOM modification queue to get flushed.

if you do something like

   $('a').each(function(k,e){
      $(e).append('<span>' ...);
      var width = $(e).width()
      // do something with the width;
   }

If you have code like the above, it is going to cause a repaint on each iteration. If you unroll it into three separate loops, one that does dom modification, one that does dom measurement, and another that does modification, then you will drop the number of repaints from potentially 100s to just 2.

[ghostdiver]

It does not trigger repaint on each iteration.