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

Question

Обновление

Очевидно, шаблоны jQuery могут быть скомпилированы, и это помогает повысить производительность для шаблонов с , если операторы показаны здесь .

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

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

---

Привет,

Только сегодня мне сказали, что существуют проблемы с производительностью при использовании шаблонов 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>

Спасибо,

Чи

Answer 1

Чи Чан,

немного опоздал на след с этим.Я обнаружил, что сначала компиляция шаблонов, а затем обращение к ним по строковому идентификатору (в приведенном ниже случае именованная переменная templateAlias) на самом деле в 10 раз быстрее, чем проход по маршруту объекта.Вот как вы этого добьетесь (на основе вашего примера кода):

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

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

это должно значительно ускорить процесс, поскольку шаблон будет скомпилирован и не будет использовать всю объектную модель при каждом запускефункция .appendTo().Использование $('#tmplRow').tmpl(data).appendTo('#table'); означает, что $('#tmplRow') запрашивает DOM, тогда как $.tmpl(templateAlias, data).appendTo('#table'); добавляет только DOM на основе ссылки на шаблон.есть довольно много чтения по этому вопросу.

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

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

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

Answer 2

Сейчас это самый быстрый двигатель: http://documentcloud.github.com/underscore/

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

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

Answer 3

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

Вот эталонный тест jsperf, который генерирует 1000 строк из 10 столбцов и отображает их. Я в среднем 200-250 мс, чтобы сделать 1000 строк в Chrome 9.

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

Answer 4

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

http://mustache.github.com/

Answer 5

Ваш шаблон действительно прост, вы можете взглянуть на handlebars.js , который является языком шаблонов, с возможностью предварительной компиляции шаблонов.

Он сделанчлен рельсов и JQuery Йехуда Кац.