Browser Diet jQuery vs Javascript Performance Text (v15)

Revision 15 of this benchmark created by xCMS jQuery on

Description

We'll modify an element's text and then change a couple CSS properties.

Preparation HTML

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

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

Setup

var XCMSJQ = XCMSJQ || {};
    XCMSJQ.perf = XCMSJQ.perf || {};
    
    XCMSJQ.perf.array = XCMSJQ.perf.array || {};
    XCMSJQ.perf.array['is'] = function() {
      return !!arguments[0].shift;
    };
    
    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
jQuery
var value = $('#text').css('backgroundColor');
ready
Javascript
var text = document.getElementById('text');
var value = text.style.backgroundColor;
ready
XCMSJQ $ (string)
var value = XCMSJQ.perf.css['get']($('#text'), 'backgroundColor', true);
ready
XCMSJQ $ (string -)
var value = XCMSJQ.perf.css['get']($('#text'), 'background-color');
ready
XCMSJQ JS (array)
var value = XCMSJQ.perf.css['get'](document.getElementById('text'), 'backgroundColor', true);
ready

Revisions

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