Search code examples
javascriptjqueryperformancejquery-filter

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;


Solution

  •  $.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
       }
    
     }