यह jquery इतनी धीमी क्यों है?

Question

मैं एक jquery प्लगइन का उपयोग कर रहा हूं जो हेडर को एक HTML तालिका पर हल करता है जो मैं उत्पन्न करता हूं। दुर्भाग्य से प्लगइन का प्रदर्शन बहुत धीमी है और मैं निम्नलिखित कोड के लिए नीचे संकुचित है:

var $tbl = $(this); 
var $tblhfixed = $tbl.find("thead"); 
$tblhfixed.find("th").each(function()  
    $(this).css("width", $(this).width()); 
}); 

यह यानी 2,000 पंक्तियों के साथ एक मेज पर के बारे में 40 सेकंड ले जा रहा है। क्या किसी को पता है कि यह इतना धीमा क्यों है और अधिक महत्वपूर्ण बात यह है कि मैं इसे तेज़ी से कैसे बना सकता हूं? मैंने कई अन्य प्लगइन की कोशिश की है और यह एकमात्र ऐसा है जो काम करता है कि मैं इसे कैसे चाहता हूं। किसी भी मदद के लिए धन्यवाद

Answer 1

अपराधी शायद .each है।

कारण यह है कि जब आप सामान्य लूप के बजाय .each का उपयोग करते हैं, तो आप प्रत्येक पुनरावृत्ति के लिए एक फ़ंक्शन कॉल करते हैं। इस मामले में फ़ंक्शन कॉल का एक बहुत बड़ा ओवरहेड होता है, क्योंकि प्रत्येक पुनरावृत्ति के लिए एक नया कॉलस्टैक बनाया जाना चाहिए।

यह तेजी से बदल

$tblhfixed.find("th").each(function()  
    $(this).css("width", $(this).width()); 
}); 

को

var elms = $tblhfixed.find("th"); 
for(var i=0, elm;elm = elms[i];i++) { 
    elm.css("width", elm.width()); 
} 

Answer 2

आप को दोहराना नहीं चाहिए $(this) अपने कार्य .each() में पारित कर दिया अंदर बनाने के लिए। एक तत्व को लपेटने में गैर-तुच्छ ओवरहेड होता है, जो आपके पास 20k तत्व होने पर ठीक नहीं होता है। आप .each() कॉल के अंदर जितना संभव हो उतना काम खत्म करना चाहते हैं, या इसे पूरी तरह खत्म कर सकते हैं।

इसके अलावा

, क्यों क्वेरी find() दो बार, जब आप इस के बजाय कर सकते हैं, जो आप एक ही परिणाम देना चाहिए:

$ths = $('table thead th'); //or tableid, or something 
$ths.css('width', $ths.width()); 

Answer 3

सबसे पहले, आप find() का उपयोग करना चाहिए तभी होता है जब आप सभी नेस्टेड नोड्स के माध्यम से पारित करने की जरूरत है। यहां आप children() का उपयोग कर सकते हैं।

दूसरा, हर बार $(this), jQuery वस्तु का नया उदाहरण बनाता है जब आप इसे एक बार बना सकते हैं:

var $this = $(this); 

हर बार $(this).width() पुनर्गणना की जाती है। सुनिश्चित करें कि आपको इसे पुन: गणना करने की आवश्यकता है। या कार्य करें:

var tableWidth = $this.width(); 

और तीसरा, @Martin Jespersen के अनुसार, प्रत्येक यात्रा function वस्तु बन जाता है।

इसके अलावा आपको यहां jQuery की आवश्यकता नहीं है। आप सीधे डीओएम तक पहुंच सकते हैं:

var tableWidth = ...; // get the table width the way you want 
var thead = this.tHead; 
var thRow = thead.rows[0]; 
for (var i = 0; i < thRow.length; ++i) { 
    thRow.cells[i].style.width = tableWidth + "px"; 
} 

Answer 4

मुझे लगता है कि आपको एक ही समस्या का सामना करना पड़ा जो मैंने कुछ समय पहले किया था। इसे "रीकुल्यूलेट लेआउट" या कुछ कहा जाता है।

इस तरह दो छोरों पर इस स्क्रिप्ट को अलग करने, का प्रयास करें:

var $tbl = $(this); 
var $tblhfixed = $tbl.find("thead"); 
var widths = []; 

// 1. 
$tblhfixed.find("th").each(function() 
    widths.push($(this).width()); 
}); 

// 2. 
$tblhfixed.find("th").each(function (index, element) 
    $(this).css("width", widths[index]); 
}); 

पहले एक सब चौड़ाई की गणना करेगा।दूसरा उन्हें वें के

युपीडी पर लागू होंगे: आप 1. और 2 .:

$tblhfixed.hide(); 

के बीच इस कोड को रखकर प्रदर्शन को बढ़ाने और बाद 2 .:

$tblhfixed.show(); 

फिर यह दिखा सकते हैं

Answer 5

ऐसा लगता है कि $ .width() 99 बार देशी प्राप्त की तुलना में धीमी है (0) .clientWidth, इस परीक्षण की जाँच: http://jsperf.com/jq-width-vs-client-width