仮想DOMに思いを馳せていたらそもそもブラウザのレンダリングがわかってなかった ref: http://qiita.com/tkdn/items/5be7ee5cc178a62f4f67

bad.js

$('<div id="foobar"></div>').append('body').hide();

file0.js

$('div#hoge').css('margin-left', 30)
             .css('margin-left', 50)
             .css('margin-left', 0)
             .css('margin-left', 16);

file1.js

var target = $('#fuga');
for (var i = 0; i < 100; i++) {
  var offsetLeft = target.offsetLeft;
  target.css('margin-left', offsetLeft + 1);  
}

file2.js

var target = $('#fuga');
var offsetLeft = target.offsetLeft;
for (var i = 0; i < 100; i++) {
  offsetLeft += 1;
  target.css('margin-left', offsetLeft);  
}

file3.js

$('<div id="foobar"></div>').append('body').hide();

file4.js

$('<div id="foobar" style="display:none;"></div>').hide().append('body');

file5.js

$('<div id="foobar" class="element-is_not-display"></div>').append('body');

good.js

$('<div id="foobar" class="element-is_not-display"></div>').append('body');

soso.js

$('<div id="foobar" style="display:none;"></div>').hide().append('body');