Mootools vs vanilla add/remove class

JavaScript performance comparison

Test case created by Matiss

Info

This test case is to determine which of the three approaches is the fastest one.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/mootools/1.3/mootools-yui-compressed.js">
</script>
<div id="foo" class="bar">
</div>

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
Mootolls add/removeClass()
var foo = $("foo");
foo.addClass("foo");
foo.removeClass("foo");
 
pending…
vanilla JS
var foo = document.getElementById("foo"),
    original = foo.className;

foo.className = foo.className += " foo";

foo.className = "";
foo.className = original;
pending…
vanilla replace()
var foo = document.getElementById("foo");

foo.className = foo.className += " foo";

foo.className = foo.className.replace(/\bfoo\b/, '');
 
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