jquery mediator vs jquery

JavaScript performance comparison

Revision 5 of this test case created by Jason McAffee

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://rawgithub.com/jasonmcaffee/jQueryMediator/master/dist/jQueryMediator-0.0.1.min.js"></script>

<div id="tests">
    <div id="htmlTest1">html test 1</div>
    <div id="findTest">
        <span class="test1">test1</span>
    </div>
</div>
<script>
Benchmark.prototype.setup = function() {
   
    jQueryMediator.mediator.setConfig({
            allowedFunctions:[
                'html',
                'find',
                'hasClass'
            ],
            allowedProps:[
                'length'
            ],
            allowedJQueryFunctionProperties:[
                'ajax'
            ]
        });
   
    var oldMediator = {
        find: function(element, selector){
            return $(element).find(selector)[0];
        },
        query: function(selector){
            return $(selector)[0];
        },
        html: function(el, newVal){
            if(newVal){
                $(el).html(newVal);
            }else{
                return $(el).html();
            }
        }
    };
    var jqueryInstance = $('#findTest');
    var mediatorInstance = jQueryMediator('#findTest');
    var oldMediatorEl = jqueryInstance[0];
};
</script>

Preparation code output

html test 1
test1

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
A. jquery instance
$('#findTest');
pending…
A. mediator instance
jQueryMediator('#findTest');
pending…
B. jquery find test
jqueryInstance.find('.test1');
pending…
B. mediator find (via array)
mediatorInstance.find('.test1');;
pending…
B. old mediator find
oldMediator.find(oldMediatorEl, '.test1');
pending…
C. jquery multiple
$('#findTest').find('.test1').html();
 
pending…
C. mediator multiple
jQueryMediator('#findTest').find('.test1').html();
pending…
C. old mediator multiple
var el = oldMediator.query('#findTest');
var foundEl = oldMediator.find(el, '.test1');
oldMediator.html(foundEl);
 
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