Poprawa wydajności jQuery szablonu

Question

Aktualizacja

Najwyraźniej jQuery Szablony mogą być kompilowane i pomaga wydajność szablonów z if pokazano here.

Ale jak pokazano here, prekompilowane szablony jQuery nie zrobiły wiele dla mojego przypadku, ponieważ mój szablon nie zawiera bloku logicznego.

Dla tych, którzy sugerują użycie innego mechanizmu szablonowego, idealnie chciałbym użyć tylko szablonów jQuery, ponieważ wszyscy w zespole znają tylko jQuery. Istnieje również przypadek testowy this, który porównuje kilka silników szablonów.

---

Cześć,

Właśnie dzisiaj powiedziano mi, że istnieją problemy z wydajnością z użyciem szablonów jQuery.

Aby porównać, użyłem szablonów jQuery i starej dobrej metody dodawania ciągów do dodawania wierszy do tabeli. Wyniki można zobaczyć here. Korzystanie z szablonów jQuery jest o około 65% wolniejsze w porównaniu do metody dodawania ciągów, Ouch!

Zastanawiam się, co można zrobić, aby poprawić wydajność skryptu szablonu jQuery.

Pełny skrypt można wyświetlić w dostępnym linku. Ale podstawowa idea jest następująca:

Szablon:

<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> 

danych:

<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> 

Wykonuje:

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

Dzięki,

Chi

Answer 1

Szablon jest bardzo proste, może chcesz take a look at handlebars.js który to język szablonów, który ma możliwość precompile szablonów.

Jest wykonana przez szyny i rdzeń jquery członka Yehuda Katz.

Answer 2

To wydaje się być najmocniejszy silnik teraz: http://documentcloud.github.com/underscore/

można znaleźć tutaj zestaw testów porównawczych, który porównuje wszystkie różne ramy szablonów dostępnych obecnie: https://github.com/aefxx/jQote2 [pobierz i uruchom jqote.benchmark.htm].

Wierzę, że szablony jQuery są w powijakach, a wydajność poprawi się w kolejnych iteracjach.

Answer 3

To zależy od przeglądarki, która wykonuje renderowanie.IE6 może być dość powolny (chociaż przeniesienie 1000 dużych wierszy znaczników HTML i wstrzyknięcie go do dokumentu również nie będzie szybkie).

Tutaj jest jsperf benchmark that generates 1,000 rows of 10 columns and renders it. I'm averaging 200-250ms to render z 1000 wierszy w Chrome 9.

Ważniejsze pytanie powinno być naprawdę: Dlaczego w świecie ty wyświetlając 1000 wierszy na raz? Zawsze są lepsze alternatywy UX.

Answer 4

Chi Chan,

trochę późno na szlaku z tego. Odkryłem, że kompilowanie szablonów najpierw, a następnie odwoływanie się do nich za pomocą ciągu znaków Id (w przypadku poniżej, nazwana zmienna templateAlias) jest w rzeczywistości 10 razy szybsze niż przejście przez trasę obiektu. Oto w jaki chcesz osiągnąć (w oparciu o próbki kodu):

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

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

powinno to znacznie przyspieszyć procedings jako szablon zostaną skompilowane i nie będzie używany przez cały model obiektu za każdym uruchomieniu .appendTo() funkcjonować. Używanie $('#tmplRow').tmpl(data).appendTo('#table'); oznacza, że ​​zapytanie dotyczy DOM, natomiast $.tmpl(templateAlias, data).appendTo('#table'); dodaje tylko do DOM na podstawie odwołania do szablonu. jest sporo czytania na ten temat.

Oto link, które mogą pomóc:

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

nadzieję, że to pomaga, powodzenia ...

Answer 5

Nikt nie wspomniał wąsy. Pod koniec 2011 roku wąsy uzyskały najlepszą wydajność z popularnych szablonów szablonów.

http://mustache.github.com/