better-dom vs jquery: classes manipulation (v6)

Revision 6 of this benchmark created by Maksim Chemerisuk on

Description

Compare performance of the better-dom library and jquery in typical cases

Preparation HTML

<script src="//code.jquery.com/jquery-2.1.0.js"></script>
<script src="//rawgithub.com/chemerisuk/better-dom/v1.7.1/dist/better-dom.js"></script>
<script>
var nativeSandbox = document.createElement("div"),
    jquerySandbox = $(nativeSandbox),
    domSandbox = DOM.create(nativeSandbox),
    className = "t" + new Date().getTime();

document.body.appendChild(nativeSandbox);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jquery#addClass
jquerySandbox.addClass("x" + new Date().getTime());
nativeSandbox.className = "";
ready
DOM#addClass
domSandbox.addClass("x" + new Date().getTime());
nativeSandbox.className = "";
ready
jquery#addClasses
jquerySandbox.addClass("a" + new Date().getTime() + " b" + new Date().getTime() + " c" + new Date().getTime() + " d" + new Date().getTime());
nativeSandbox.className = "";
ready
DOM#addClasses
domSandbox.addClass("a" + new Date().getTime(), "b" + new Date().getTime(), "c" + new Date().getTime(), "d" + new Date().getTime());
nativeSandbox.className = "";
ready
jquery#toggleClass
jquerySandbox.toggleClass(className);
ready
DOM#toggleClass
domSandbox.toggleClass(className);
ready
jquery#hasClass
jquerySandbox.hasClass(className);

nativeSandbox.className = new Date().getTime() % 2 ? className : "";
ready
DOM#hasClass
domSandbox.hasClass(className);

nativeSandbox.className = new Date().getTime() % 2 ? className : "";
ready

Revisions

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

  • Revision 1: published by Maksim Chemerisuk on
  • Revision 2: published on
  • Revision 3: published by Maksim Chemerisuk on
  • Revision 5: published on
  • Revision 6: published by Maksim Chemerisuk on