Обновить
По-видимому, шаблоны jQuery можно скомпилировать, и это повышает производительность шаблонов с операторами if, показанными здесь.
Но, как показано здесь, предварительно скомпилированные шаблоны jQuery не очень подходят для моего случая. так как мой шаблон не содержит логического блока.
Для тех, кто предлагает использовать другой механизм шаблонов, в идеале я хотел бы использовать только шаблоны jQuery, поскольку все в команде знают только jQuery. Существует также этот тестовый пример, в котором сравниваются несколько шаблонизаторов.
Hi,
Только сегодня мне сказали, что есть проблемы с производительностью при использовании шаблонов jQuery.
Для сравнения я использовал шаблоны jQuery и старый добрый метод добавления строк для добавления строк в таблицу. Результаты можно увидеть здесь. Использование шаблонов 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>
Спасибо,
Чи
