Улучшение производительности JQuery шаблона

Question

Update

Видимо, шаблоны JQuery могут быть скомпилированы и повышает производительность для шаблонов с если заявления показано here.

Но, как показано на рисунке here, предварительно скомпилированные шаблоны jQuery не очень подходят для моего случая, так как мой шаблон не содержит логического блока.

Для тех, кто предлагает использовать другой шаблонный движок, в идеале я хотел бы использовать только шаблоны jQuery, так как каждый в команде знает только jQuery. Существует также this тестовый корпус, который сравнивает несколько шаблонов.

---

Привет,

Только сегодня мне сказали, что есть проблемы с производительностью с помощью шаблонов JQuery.

Для сравнения я использовал шаблоны jQuery и старый добрый метод добавления строк для добавления строк в таблицу. Результаты можно увидеть here. Использование шаблонов jQuery примерно на 65% медленнее сравнивается с методом добавления строк, Ouch!

Мне интересно, что можно сделать, чтобы улучшить производительность шаблона шаблона 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> 

Спасибо,

Chi

Answer 1

Ваш шаблон очень прост, вы можете take a look at handlebars.js, который является языком шаблонного, который имеет возможность прекомпиляции шаблоны.

Он изготовлен рельсами и основным элементом JQuery Yehuda Katz.

Answer 2

Это, кажется, самый быстрый двигатель прямо сейчас: http://documentcloud.github.com/underscore/

Вы можете найти тестовый набор бенчмаркинг здесь, сравнивающий все различные рамки шаблонных, доступные в настоящее время: https://github.com/aefxx/jQote2 [скачать и запустить jqote.benchmark.htm].

Я действительно верю, что шаблоны jQuery находятся в зачаточном состоянии и производительность улучшится в последующих итерациях.

Answer 3

Это зависит от браузера, который выполняет рендеринг.IE6 может быть довольно медленным (хотя передача 1000 больших строк разметки HTML и инъекция в документ также не будет быстрой).

Вот такой jsperf benchmark that generates 1,000 rows of 10 columns and renders it. I'm averaging 200-250ms to render 1000 строк в Chrome 9.

Более важный вопрос должен действительно быть: Почему в мире вы отображая 1000 строк за один раз? Всегда есть лучшие альтернативы UX, чем это.

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') запрашивает DOM, тогда как $.tmpl(templateAlias, data).appendTo('#table'); добавляет только DOM на основе ссылки на шаблон. есть немного чтения по этому вопросу.

Вот ссылка, которая может помочь:

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

надеюсь, что это помогает, удачи ...

Answer 5

Никто не упомянул усов. В конце 2011 года усы имели лучшую производительность из популярных шаблонов шаблонов.

http://mustache.github.com/