DOM getter/setter vs jQuery.attr/prop

JavaScript performance comparison

Revision 5 of this test case created by Maksim Chemerisuk

Info

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

Preparation code

<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("a"),
    jquerySandbox = jQuery(document.createElement("a")),
    domSandbox = DOM.create(document.createElement("a")),
    test;

$("body").append(jquerySandbox);
DOM.find("body").append(domSandbox);
</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#attr(key)
jquerySandbox.attr("rel");
pending…
jquery#prop(key)
jquerySandbox.prop("rel");
pending…
DOM getter
domSandbox.get("rel");
pending…
Native getAttribute
nativeSandbox.getAttribute("rel");
pending…
jquery#attr(key, value)
jquerySandbox.attr("rel", new Date().toString());
pending…
jquery#prop(key, value)
jquerySandbox.prop("rel", new Date().toString());
pending…
DOM setter
domSandbox.set("rel", new Date().toString());
pending…
Native setter
nativeSandbox.rel = new Date().toString();
pending…
Native setAttribute
nativeSandbox.setAttribute("rel", new Date().toString());
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