mejorar el rendimiento plantilla jQuery

Question

actualización

Al parecer, las plantillas jQuery puede ser compilado y se mejora el rendimiento para las plantillas con si las declaraciones mostrado here.

Pero como se muestra en here, las plantillas jQuery precompiladas no hacen mucho para mi caso ya que mi plantilla no contiene ningún bloque lógico.

Para aquellos que están sugiriendo el uso de otro motor de plantillas, idealmente me gustaría usar solo plantillas de jQuery ya que todos en el equipo solo conocen jQuery. También hay this caso de prueba que compara unas pocas plantillas de motor.

---

Hola,

Hoy mismo me dijeron que hay problemas de rendimiento con el uso de plantillas jQuery.

Para comparar, he usado las plantillas de jQuery y el buen método de agregar cadenas para agregar filas a una tabla. Los resultados se pueden ver here. El uso de plantillas jQuery es aproximadamente un 65% más lento en comparación con el método de anexión de cadenas, ¡Ay!

Me pregunto qué se puede hacer para mejorar el rendimiento de la secuencia de comandos de la plantilla jQuery.

El guión completo se puede ver en el enlace proporcionado. Pero la idea básica es la siguiente:

Plantilla:

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

datos:

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

Ejecuta:

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

Gracias,

Chi

Answer 1

Su plantilla es muy simple, es posible que desee take a look at handlebars.js que es un lenguaje de plantillas que tiene la opción de precompilar las plantillas.

Está hecho por los carriles y el miembro de jquery core Yehuda Katz.

Answer 2

Este parece ser el motor más rápido en este momento: http://documentcloud.github.com/underscore/

se puede encontrar un conjunto de pruebas de evaluación comparativa aquí que compara los diferentes marcos de plantillas disponibles en la actualidad: https://github.com/aefxx/jQote2 [descargar y ejecutar jqote.benchmark.htm].

Creo que las plantillas de jQuery están en su infancia y el rendimiento mejorará en las iteraciones posteriores.

Answer 3

Depende mucho del navegador que realiza la representación.IE6 puede ser bastante lento (aunque la transferencia de 1.000 filas grandes de marcado HTML e inyectar eso en el documento tampoco va a ser rápido).

He aquí una jsperf benchmark that generates 1,000 rows of 10 columns and renders it. I'm averaging 200-250ms to render los 1.000 filas en Chrome 9.

La pregunta más importante debería ser: ¿Por qué en el mundo que está visualizando 1.000 filas a la vez? Siempre hay mejores alternativas UX que eso.

Answer 4

Chi Chan,

un poco tarde en el camino con éste. Descubrí que compilar las plantillas primero y luego hacer referencia a ellas con un ID de cadena (en el caso siguiente, la variable denominada templateAlias) es en realidad 10 veces más rápido que pasar por la ruta del objeto. Aquí te mostramos cómo lograr que (basado en el código de ejemplo):

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

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

esto debería acelerar significativamente procedings Como habrá sido compilado la plantilla y no se utiliza todo el modelo de objetos cada vez que se ejecuta el .appendTo() función. El uso de $('#tmplRow').tmpl(data).appendTo('#table'); significa que $('#tmplRow') consulta el DOM, mientras que $.tmpl(templateAlias, data).appendTo('#table'); solo agrega al DOM según la referencia a la plantilla. hay bastante lectura sobre el tema.

Aquí hay un enlace que puede ayudar:

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

esperanza que esto ayude, buena suerte ...

Answer 5

Nadie mencionó bigote. A finales de 2011, el bigote tuvo el mejor rendimiento de los frameworks de plantillas populares.

http://mustache.github.com/