jQuery टेम्पलेट प्रदर्शन में सुधार

Question

अद्यतन

जाहिर है, jQuery टेम्पलेट्स संकलित किया जा सकता है और इसके साथ अगर बयान दिखाया here टेम्पलेट्स के लिए प्रदर्शन में मदद करता है।

लेकिन जैसा कि here दिखाया गया है, प्रीकंपिल्ड jQuery टेम्पलेट्स मेरे मामले के लिए बहुत कुछ नहीं करता है क्योंकि मेरे टेम्पलेट में कोई तर्क ब्लॉक नहीं है।

उन लोगों के लिए जो एक और टेम्पलेटिंग इंजन के उपयोग का सुझाव दे रहे हैं, आदर्श रूप में मैं सिर्फ jQuery टेम्पलेट्स का उपयोग करना चाहता हूं क्योंकि टीम के हर व्यक्ति सिर्फ jQuery को जानता है। this परीक्षण केस भी है जो कुछ templating इंजन की तुलना करता है।

---

हाय,

बस आज मुझे बताया गया था वहाँ jQuery टेम्पलेट का उपयोग कर के साथ प्रदर्शन के मुद्दों रहे हैं।

तुलना करने के लिए, मैंने एक jQuery में पंक्तियों को जोड़ने के लिए jQuery टेम्पलेट्स और अच्छी पुरानी स्ट्रिंग एपेंड विधि का उपयोग किया है। परिणाम here देखा जा सकता है। JQuery टेम्पलेट्स का उपयोग करना स्ट्रिंग एपेंड विधि की तुलना में लगभग 65% धीमी तुलना है, ओच!

मुझे आश्चर्य है कि jQuery टेम्पलेट स्क्रिप्ट के प्रदर्शन को बेहतर बनाने के लिए क्या किया जा सकता है।

पूर्ण लिपि को दिए गए लिंक में देखा जा सकता है। लेकिन मूल विचार इस प्रकार है:

टेम्पलेट:

<script type="x-jquery-tmpl" id="tmplRow"> 
<tr> 
    <td><input type="checkbox" value="${id}" /></td> 
    <td>${firstName} ${lastName}</td> 
    <td class="edit"> 
     <a>Edit</a> 
     <input style="display:none;" type="hidden" value="Blah" /> 
     <input class="cancel" type="button" value="cancel" /> 
    </td> 
    <td class="select"> 
     <a>Select</a> 
     <select style="display:none;"> 
      <option>0</option> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
      <option>5</option> 
      <option>6</option> 
      <option>7</option> 
      <option>8</option> 
      <option>9</option> 
      <option>10</option> 
     </select> 
     <input class="cancel" type="button" value="cancel" /> 
    </td> 
    <td>More string</td> 
    <td>More string</td> 
    <td>More string</td> 
    <td>More string</td> 
    <td>More string</td> 
    <td>More string</td> 
</tr> 
</script> 

डाटा:

<script type="text/javascript"> 
    var data = []; 

    for (var i = 0; i < 100; i++) { 
     var row = { 
      id: i, 
      firstName: 'john', 
      lastName: 'doe' 
     }; 

     data.push(row); 
    } 
</script> 

HTML:

<table id="table"></table> 

पर क्रियान्वित:

<script type="text/javascript"> 
$('#tmplRow').tmpl(data).appendTo('#table'); 
</script> 

धन्यवाद,

ची

Answer 1

आपका टेम्पलेट वास्तव में आसान है, आप take a look at handlebars.js जो एक templating भाषा है जो टेम्पलेट्स precompile करने का विकल्प है है सकते हैं।

यह रेल और jquery कोर सदस्य येहुदा काट्ज़ द्वारा बनाया गया है। http://documentcloud.github.com/underscore/

आप एक बेंच मार्किंग टेस्ट स्वीट यहाँ जो वर्तमान में उपलब्ध सभी विभिन्न templating चौखटे तुलना पा सकते हैं:: https://github.com/aefxx/jQote2 [डाउनलोड और jqote.benchmark.htm चलाने]

Answer 2

यह सबसे तेजी से इंजन अभी हो रहा है।

मुझे विश्वास है कि jQuery टेम्पलेट्स उनके बचपन में हैं और प्रदर्शन बाद के पुनरावृत्तियों में सुधार होगा।

Answer 3

यह प्रतिपादन करता है जो ब्राउज़र पर बहुत निर्भर करता है।आईई 6 काफी धीमा हो सकता है (हालांकि एचटीएमएल मार्कअप की 1,000 बड़ी पंक्तियों को स्थानांतरित करना और दस्तावेज में इंजेक्शन देना या तो तेज़ नहीं होगा)।

यहां Chrome में एक jsperf benchmark that generates 1,000 rows of 10 columns and renders it. I'm averaging 200-250ms to render 1,000 पंक्तियों 9.

अधिक महत्वपूर्ण सवाल वास्तव में होना चाहिए: दुनिया में क्यों आप एक बार में 1,000 पंक्तियाँ प्रदर्शित कर रहे हैं? इसके मुकाबले हमेशा बेहतर यूएक्स विकल्प होते हैं।

Answer 4

ची चैन,

थोड़ी देर हो चुकी इस एक के साथ निशान पर। मैंने पाया है कि पहले टेम्पलेट को संकलित करना और फिर उन्हें एक स्ट्रिंग आईडी (नीचे दिए गए मामले में, नामित चर templateAlias) द्वारा संदर्भित करना वास्तव में ऑब्जेक्ट रूट के माध्यम से जाने से 10 गुना तेज है। यहाँ आप यह कैसे प्राप्त चाहते हैं (अपने कोड नमूने के आधार पर) है:

var templateAlias = 'tmplRow'; 
// compile the template 
$.template(templateAlias, $("#tmplRow")); 

<script type="text/javascript"> 
    $.tmpl(templateAlias, data).appendTo('#table'); 
</script> 

यह काफी के रूप में टेम्पलेट संकलित किया गया है जाएगा procedings में तेजी लाने चाहिए और पूरे ऑब्जेक्ट मॉडल हर का उपयोग किया जा नहीं होगा आप .appendTo() चलाने समारोह। $('#tmplRow').tmpl(data).appendTo('#table'); का उपयोग करना मतलब है कि $('#tmplRow') डोम से पूछताछ करता है, जबकि $.tmpl(templateAlias, data).appendTo('#table'); केवल टेम्पलेट के संदर्भ के आधार पर डीओएम में जोड़ता है। इस विषय पर काफी कुछ पढ़ना है।

http://boedesign.com/misc/presentation-jquery-tmpl/#13

आशा है कि यह मदद करता है, गुड लक ...

Answer 5

कोई भी मूंछें उल्लेख किया:

यहाँ मदद मिल सकती है कि एक लिंक भी है। 2011 के उत्तरार्ध में मूंछ में लोकप्रिय टेम्पलेटिंग फ्रेमवर्क से सबसे अच्छा प्रदर्शन था।

http://mustache.github.com/