siblings( ":jqmData(role='xxx')") vs parent() + webkitMatchesSelector("xxx")

JavaScript performance comparison

Test case created by Sanghee

Preparation code

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
function toObject(elems) {
    var idx = 0,
        ret = $.fn.constructor();
    for (; idx <elems.length; idx++) {
        ret[idx] = elems[idx];
    }
    ret.length = elems.length;
    return ret;
}

var slice = Array.prototype.slice;
function findByRole(elem, selector) {
        var result = (slice.call(elem.children)).filter(function(node) {
                return node.webkitMatchesSelector(selector);
        });
       
        return toObject(result);
}
</script>

<div id="test">
   <div data-role="button">top</div>
   <div>middle</div>
   <div data-role="dialog">bottom</div>
</div>
<script>
var elem = $("#test").find(":jqmData(role='button')");
</script>

Preparation code output

top
middle
bottom

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
siblings( ":jqmData(role='xxx')")
elem.siblings(":jqmData(role='dialog')");
pending…
parent() + webkitMatchesSelector("xxx")
toObject(findByRole(elem.parent().get(0), "[data-" + $.mobile.ns + "role='dialog']"));
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