Efficient Javascript for DOM modifications
===

Say, I've got an HTML file that I want to process using Javascript. For example:

* Add some DOM elements, like `span` or `div` wrappers.
* Change the document styling a bit, like base font size, line-height, etc.
* Use a hyphentor to add `&shy;` entities.

What would be the most efficient way to do this, i.e. I'd like to do it with a minimum amount of reflows.

The ideal case would be having the JS-code run before even the first layout. Is this possible? I know, it's generally a bad idea to execute expensive scripts before the page has been displayed for this would make the page look blank for some time and it's a really bad experience. However, I'm going to need this to work offline and this would not be an issue for my project.

Or, is there's a way to do all the dom modifications in one bunch, i.e. a reflow to be triggered after all the alterations have finished?