Подтвердить что ты не робот

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

Обновление

По-видимому, шаблоны jQuery могут быть скомпилированы и помогают производительности для шаблонов с показателями if здесь.

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

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


Привет,

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

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

Мне интересно, что можно сделать для повышения производительности шаблона jQuery script.

Полный script можно просмотреть в предоставленной ссылке. Но основная идея такова:

Шаблон:

<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

4b9b3361

Ответ 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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

http://mustache.github.com/