Find disabled jQuery vs. lodash vs. native

JavaScript performance comparison

Revision 2 of this test case created and last updated

Info

See if avoiding sizzle makes a big difference.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.0.0-rc.3/lodash.min.js">
</script>
<form id="test">
  <select name="enabledSelect">
    <option value="1">
      One
    </option>
  </select>
  <input name="disabledText" type="text" value="Hello" disabled="disabled">
  <select name="disabledSelect" disabled="disabled">
    <option value="2">
      Two
    </option>
  </select>
  <input type="text" id="enabledText" value="Good, enabled">
  <input type="checkbox" name="enabledCheck" checked="checked">
  <button>
    Submit
  </button>
</form>
<script>
Benchmark.prototype.setup = function() {
    var el = document.getElementById('enabledText');
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jQuery siblings and disabled
var disabled = $(el).siblings(':disabled');
disabled.addClass('disabled');
pending…
jQuery siblings - lodash filter disabled
var disabled = _.filter($(el).siblings(), 'disabled');
$(disabled).addClass('disabled');
pending…
Siblings / Disabled Native
var disabled = (function() {
  var child, children, start, _i, _len;
  disabled = [];
  children = el.parentElement.children;
  for (_i = 0, _len = children.length; _i < _len; _i++) {
    child = children[_i];
    if (child !== el && child.disabled) disabled.push(child);
  }
  return $(disabled).addClass('disabled');
})();
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment