améliorer les performances du modèle jQuery

Question

Mise à jour

Apparemment, les modèles jQuery peut être compilé et il aide à la performance pour les modèles avec si les déclarations montré here.

Mais comme indiqué here, les modèles jQuery précompilés ne font pas beaucoup pour mon cas puisque mon modèle ne contient pas de bloc logique. Pour ceux qui suggèrent l'utilisation d'un autre moteur de gabarit, idéalement, je voudrais utiliser uniquement des gabarits jQuery car tout le monde dans l'équipe ne connaît que jQuery. Il y a aussi un cas de test this qui compare un moteur de template.

---

Salut,

Encore aujourd'hui, on m'a dit qu'il ya des problèmes de performance avec l'aide de modèles jQuery. Pour comparer, j'ai utilisé les modèles jQuery et la bonne vieille méthode d'ajout de chaîne pour ajouter des lignes à une table. Les résultats peuvent être vus here. L'utilisation de modèles jQuery est environ 65% plus lente que la méthode d'ajout de chaîne, Ouch!

Je me demande ce que l'on peut faire pour améliorer les performances du script de template jQuery.

Le script complet peut être visualisé dans le lien fourni. Mais l'idée de base est la suivante:

Modèle:

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

données:

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

Exécute:

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

Merci,

Chi

Answer 1

Votre modèle est très simple, vous pourriez vouloir take a look at handlebars.js qui est une langue qui a templating l'option de précompiler les modèles.

Elle est faite par des rails et un membre de noyau de jquery Yehuda Katz.

Answer 2

Cela semble être le plus rapide du moteur en ce moment: http://documentcloud.github.com/underscore/

Vous pouvez trouver une suite de tests d'analyse comparative ici qui compare les différents cadres de matriçage actuellement disponibles: https://github.com/aefxx/jQote2 [télécharger et exécuter jqote.benchmark.htm]. Je crois que les templates jQuery sont à leurs balbutiements et les performances s'amélioreront dans les itérations suivantes.

Answer 3

Cela dépend beaucoup du navigateur qui effectue le rendu.IE6 peut être assez lent (bien que le transfert de 1 000 grandes lignes de balisage HTML et l'injection dans le document ne soit pas rapide non plus).

Voici un jsperf benchmark that generates 1,000 rows of 10 columns and renders it. I'm averaging 200-250ms to render les 1000 lignes de Chrome 9.

La question plus importante devrait vraiment être: Pourquoi dans le monde vous affichiez 1000 lignes à la fois? Il y a toujours de meilleures alternatives à l'UX.

Answer 4

Chi Chan,

un peu en retard sur la piste avec celui-ci. J'ai découvert que compiler les modèles d'abord et ensuite les référencer par un Id de chaîne (dans le cas ci-dessous, la variable nommée templateAlias) est en fait 10 fois plus rapide que de passer par la route de l'objet. Voici comment vous atteindre cet objectif (en fonction de votre exemple de code):

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

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

cela devrait accélérer considérablement procedings que le modèle aura été compilé et ne pas utiliser la chaque fois que l'ensemble du modèle d'objet que vous exécutez le .appendTo() fonction. L'utilisation de $('#tmplRow').tmpl(data).appendTo('#table'); signifie que $('#tmplRow') interroge le DOM, tandis que $.tmpl(templateAlias, data).appendTo('#table'); ajoute uniquement au DOM en fonction de la référence au modèle. il y a pas mal de lecture sur le sujet.

est ici un lien qui peut aider:

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

espérons que cette aide, Bonne chance ...

Answer 5

Personne n'a parlé de la moustache. À la fin de 2011 moustache a eu la meilleure performance de cadres de modèles populaires.

http://mustache.github.com/