inline style vs .css afterwards with lots of styles (v3)

Revision 3 of this benchmark created by Daniel Lopez on

Description

The more declarations the faster the string method is?

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  var top = "50px";
  var left = "50px";
  var zindex = "50";
  var color = '#00ff00';
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
inline style in html
jQuery('<div style="color:' + color + '; left:' + left + '; top: ' + top + '; z-index: ' + zindex + ';"></div>');
ready
css afterward
jQuery("<div>").css({
  'color': color,
  'top': top,
  'left': left,
  'z-index': zindex
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 3: published by Daniel Lopez on