क्या मुझे jQuery.each() का उपयोग करना चाहिए?

Question

मैं वस्तुओं के सरणी पर बहुत बार पुनरावृत्ति कर रहा हूं और jQuery.each() का उपयोग कर रहा हूं। हालांकि, मेरे पास गति और स्मृति समस्याएं हैं और मेरे प्रोफाइलर के अनुसार सबसे बुलाए गए तरीकों में से एक है jQuery.each()। इसके प्रदर्शन के बारे में सड़क पर क्या शब्द है? क्या मुझे लूप के लिए एक सरल पर स्विच करना चाहिए? बेशक मैं अपने कोड में कई मुद्दों को भी ठीक कर रहा हूं।

Answer 1

jQuery के लिए स्रोत कोड प्रत्येक इस प्रकार है (यदि आप जॉन Resig और एमआईटी लाइसेंस धन्यवाद):

each: function(object, callback, args) { 
    var name, i = 0, length = object.length; 

    if (args) { 
     if (length === undefined) { 
      for (name in object) 
       if (callback.apply(object[ name ], args) === false) 
        break; 
     } else 
      for (; i < length;) 
       if (callback.apply(object[ i++ ], args) === false) 
        break; 

    // A special, fast, case for the most common use of each 
    } else { 
     if (length === undefined) { 
      for (name in object) 
       if (callback.call(object[ name ], name, object[ name ]) === false) 
        break; 
     } else 
      for (var value = object[0]; 
       i < length && callback.call(value, i, value) !== false; value = object[++i]){} 
    } 

    return object; 
} 

आप का पता लगाने और देख सकते हैं, ज्यादातर मामलों में यह पाश के लिए एक बुनियादी उपयोग कर रहा है जहां एकमात्र ओवरहेड वास्तव में केवल कॉलबैक है। प्रदर्शन में कोई फर्क नहीं पड़ता है।

संपादित करें: यह अहसास के साथ है कि चयनकर्ता ओवरहेड पहले से ही हुआ है और आपको एक आबादी वाला सरणी object दिया गया है।

Answer 2

यह सुनिश्चित करने का एक तरीका है कि आप jquery से अधिक लाभ प्राप्त कर रहे हैं, किसी भी चीज को प्राप्त करने के लिए हर बार डीओएम को फिर से चलाने के बजाए परिणामों की लौटाई गई सरणी को एक चर में स्टोर करना है।

क्या करना नहीं का उदाहरण:

$('.myLinks').each(function(){ 
    // your code here 
}); 
$('.myLinks').each(function(){ 
    // some more code here 
}); 

बेहतर अभ्यास:

var myLinks = $('.myLinks'); 
myLinks.each(function(){ 
    // your code here 
}); 
myLinks.each(function(){ 
    // some more code here 
}); 

Answer 3

यह विधि आपको एक नाटकीय गति सुधार देना चाहिए।

var elements = $('.myLinks').get(), element = null; 
for (var i = 0, length = elements.length; i < length; i++) { 
    element = elements[i]; 
    element.title = "My New Title!"; 
    element.style.color = "red"; 
} 

कैशिंग प्रदर्शन में भी सुधार करेगी।

function MyLinkCache() { 
    var internalCache = $('.myLinks').get(); 

    this.getCache = function() { 
     return internalCache; 
    } 

    this.rebuild = function() { 
     internalCache = $('.myLinks').get(); 
    } 
} 

उपयोग में:

var myLinks = new MyLinkCache(); 

function addMyLink() { 
    // Add a new link. 
    myLinks.rebuild(); 
} 

function processMyLinks() { 
    var elements = myLinks.getCache(), element = null; 
    for (var i = 0, length = elements.length; i < length; i++) { 
     element = elements[i]; 
     element.title = "My New Title!"; 
     element.style.color = "red"; 
    } 
} 

Answer 4

This article (# 3) कुछ प्रदर्शन परीक्षण भाग गया और पाया गया कि jQuery चाहते प्रत्येक समारोह के बारे में 10x के रूप में पाश के लिए देशी जावास्क्रिप्ट के रूप में धीमी थी।

^{10 Ways to Instantly Increase Your jQuery Performance - 3. Use For Instead of Each}
Firebug का प्रयोग से, यह समय दो कार्यों में से प्रत्येक को चलाने के लिए ले जाता है को मापने के लिए संभव है।

var array = new Array(); 
for (var i=0; i<10000; i++) { 
    array[i] = 0; 
} 

console.time('native'); 
var l = array.length; 
for (var i=0;i<l; i++) { 
    array[i] = i; 
} 
console.timeEnd('native'); 

console.time('jquery'); 
$.each (array, function (i) { 
    array[i] = i; 
}); 
console.timeEnd('jquery'); 

ऊपर दिए गए परिणामों jQuery के "प्रत्येक" विधि के लिए मूल कोड के लिए 2ms, और 26ms हैं। बशर्ते मैंने इसे अपनी स्थानीय मशीन पर परीक्षण किया और वे वास्तव में कुछ भी नहीं कर रहे हैं (केवल एक सरणी भरने का ऑपरेशन), jQuery का प्रत्येक कार्य जेएस मूल "फॉर" लूप के रूप में 10 गुना अधिक लेता है। सीएसएस विशेषताओं या अन्य डीओएम हेरफेर संचालन की तरह, अधिक जटिल सामग्री से निपटने के दौरान यह निश्चित रूप से बढ़ेगा।

Answer 5

मूल कार्यक्षमता का उपयोग आमतौर पर तेजी से एक अमूर्तकरण जैसे JQuery.each() विधि से होगा। हालांकि, JQuery.each() विधि आसान उपयोग करने के लिए है और आपके हिस्से पर कम कोडिंग की आवश्यकता है।

सच में, किसी भी संदर्भ के बिना कोई भी सही या गलत विकल्प नहीं है। मैं इस बात का विरोध कर रहा हूं कि हमें पहले आसान कोड लिखना चाहिए, यह मानना ​​कि यह अच्छा/legilble/साफ कोड है। यदि आप किसी परिस्थिति में आते हैं, जैसे कि आप वर्णन कर रहे हैं, जहां आपकी बाधाएं कहां हैं और तेज़ कोड लिखने के समय की तुलना में एक ध्यान देने योग्य अंतराल है।

इन परिदृश्यों में JQuery.each() विधि को प्रतिस्थापित करना सहायता हो सकता है, हालांकि, आपका कोड नहीं देखा है, यह संभव है कि आपके पास JQuery विधि से संबंधित बाधाएं हों।