CODEWITHSUNDEEP
javascriptjqueryperformancejquery-filter
Md. Alim Ul Karim
Md. Alim Ul Karim

Reputation: 2432

jQuery Performance test between filter vs. find from already loaded data

I already know that 'jquery.find' search nested elements from the current selector. However 'jQuery.filter' only goes through already existed data. From my guess filter would be faster but I have seen few performance test that find does better. Don't which way should be better, can anyone please help me out on this?

Let's say I have this plugin: Which way of search through elements would be faster.

 $.plugIn = {

    $appForm: $("form.app-editing-page"), // means both editing and posting
    $appFormEdit: $("form.app-edit"),
    $appFormPost: $("form.app-post"),
    $allInputs: $("form.app-post input"),
    checkPerform: function(){
        var visibleInputs = $.plugIn.$appForm.find("input:visible"); // way 1 with find
        var visibleInputs2 = $.plugIn.$allInputs.filter(":visible"); // way 2 with filter from cached
    }

 }

In my mind filter should be faster because it looks from only the cached items. But can anyone help out on this , understanding the performance.

Another thing, is it the right way to declare plugins and variables;

Upvotes: 0

Views: 147

Answers (1)

Random Identity
Random Identity

Reputation: 305

 $.plugIn = {

   $appForm: [], //$("form.app-editing-page"), // means both editing and posting
   $appFormEdit: [], //$("form.app-edit"),
   $appFormPost: [], //$("form.app-post"),
   $allInputs: [], //$("form.app-post input"),
   checkPerform: function() {
     $.plugIn.$appForm = $(".app-editing-page"); // faster than "form.class"
     $.plugIn.$appForm = $(".app-post");
     $.plugIn.$allInputs = $.plugIn.$appForm.find("input"); // a lot more faster than complex queries.

     var visibleInputs = $.plugIn.$allInputs.filter(":visible"); // faster way
   }

 }

Upvotes: 1

Related Questions