Browser Diet jQuery vs Javascript Performance Text (v14)

Revision 14 of this benchmark created by xCMS jQuery on

Preparation HTML

<div id="text">Let's change this text</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

var XCMSJQ = XCMSJQ || {};
  XCMSJQ.perf = XCMSJQ.perf || {};
  XCMSJQ.perf.css = XCMSJQ.perf.css || {};
  XCMSJQ.perf.css['reg'] = new RegExp('-', 'i');
  XCMSJQ.perf.css['name'] = function() {
    var tthis = arguments[0],
      noregtest = arguments[1] == true;
    if (!noregtest || XCMSJQ.perf.css['reg'].test(tthis)) {
      var thisA = tthis.split('-');
      for (var thisI = 1, thisL = thisA.length; thisI < thisL; thisI++) thisA[thisI].charAt(0).toUpperCase() + thisA[thisI].slice(1);
      return thisA.join('');
    } else return tthis;
  };
  
  XCMSJQ.perf.css['set'] = function() {
    var node = arguments[0],
      obj = arguments[1],
      noregtest = arguments[2];
    if (node && node.jquery) {
      var nodeL = node.length;
      if (nodeL == 1) return XCMSJQ.perf.css['set1'](node[0], obj, noregtest);
      nodeA = node;
    } else {
      return XCMSJQ.perf.css['set1'](node, obj, noregtest);
    }
    for (var nodeI = 0, nodeL = nodeA.length; nodeI < nodeL; nodeI++) {
      var n = nodeA[nodeI];
      for (var objn in obj) n.style[XCMSJQ.perf.css['name'](objn, noregtest)] = obj[objn];
    }
  };
  
  XCMSJQ.perf.css['set1'] = function() {
    var node = arguments[0],
      obj = arguments[1],
      noregtest = arguments[2],
      node = node && node.jquery ? node[0] : node;
    for (var objn in obj) node.style[XCMSJQ.perf.css['name'](objn, noregtest)] = obj[objn];
  };
  
  
  
  XCMSJQ.perf.css['get'] = function() {
    var node = arguments[0],
      name = arguments[1],
      noregtest = arguments[2],
      node = node && node.jquery ? node[0] : node,
      obj = {};
    if (XCMSJQ.perf.array['is'](name)) {
      for (var nameI = 0, nameL = name.length; nameI < nameL; nameI++) {
        obj[name[nameI]] = node.style[XCMSJQ.perf.css['name'](name[nameI], noregtest)];
      }
      return obj;
    } else {
      return node.style[XCMSJQ.perf.css['name'](name, noregtest)];
    }
  };

Test runner

Ready to run.

Testing in
TestOps/sec
XCMS $ (1)
XCMSJQ.perf.css['set1']($('#text'), {
  'backgroundColor': 'red',
  'color': 'yellow'
}, true);
ready
XCMS $ - (multi)
XCMSJQ.perf.css['set']($('#text'), {
  'background-color': 'red',
  'color': 'yellow'
});
ready
XCMS $ - (1)
XCMSJQ.perf.css['set1']($('#text'), {
  'background-color': 'red',
  'color': 'yellow'
});
ready
XCMS $ (multi)
XCMSJQ.perf.css['set']($('#text'), {
  'backgroundColor': 'red',
  'color': 'yellow'
}, true);
ready
Hybrid (multi el support)
var node = $('#text'),
  name = {
    backgroundColor: 'red',
    color: 'yellow'
  };
var nodeA = node && node.jquery ? node : [node];
var obj = {};
if (typeof name === 'object') {
  obj = name;
} else {
  obj[name] = value;
}
for (var nodeI = 0, nodeL = nodeA.length; nodeI < nodeL; nodeI++) {
  var n = nodeA[nodeI];
  for (var objn in obj) n.style[objn] = obj[objn];
}
ready
jQuery
$('#text').css({
  backgroundColor: 'red',
  color: 'yellow'
});
ready
Javascript
var text = document.getElementById('text');
text.style.backgroundColor = 'red';
text.style.color = 'yellow';
ready

Revisions

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