Может ли часть JJS жить, а часть нет?

Question

Я строю сетку данных с тысячами элементов списка и без нумерации страниц. В результате производительность с live-привязкой, понятно, очень плохая. С ~20 пунктами списка, никаких задержек нет.

<thead>
    {{#each columns}}
        <tr><td can-click="sort">{{name}}</td></tr>
    {{/each}}
</thead>
<tbody>
    {{#each thousandsOfItems}}
        <tr><td>{{name}}</td></tr>
    {{/each}}
</tbody>

Есть ли способ для части моего шаблона быть привязанным к жизни, такой как <thead>, но используйте простую конкатенацию / внедрение строк для <tbody>?

редактировать

Мой подход может быть проблемой. Тысячи статики <tr>Скорее всего, они тоже сильно отстают. Мне было предложено попытаться добавить / удалить строки при прокрутке страницы.

Answer 1

Я сделал JSPerf, отображающий 4000 строк в одной таблице столбцов, которую вы можете проверить здесь:

http://jsperf.com/can-stache-table-render

Некоторые выводы из этих экспериментов:

• без live-inding вы можете увеличить производительность в 10 раз. Однако, если вам нужно нечто большее, вам, вероятно, придется ощутимо повысить производительность.

• Когда не выполняется прямое связывание каких-либо данных, при использовании {{#each}} не происходит повышения производительности по сравнению с просто {{#thousandsOfRows}}

• Использование div вместо строк таблицы было тем, что мне было интересно попробовать, так как вы, вероятно, могли видеть инкрементное рисование быстрее (но на самом деле, при этом все работает синхронно, пользовательский интерфейс будет блокироваться, пока все не будет нарисовано таким образом), но это на 35% медленнее Нарисуйте всю таблицу, и, вероятно, лучше избегать.

Итак, на основании этого, что мы можем сделать?

• Страницы таблицы, или, скорее, нарисуйте много таблиц фиксированного размера, пока вы не исчерпали данные. Первый экран будет отображаться быстро, а остальные будут заполняться по мере продвижения. Используйте setTimeout(), чтобы нарисовать следующую таблицу, чтобы не блокировать пользовательский интерфейс.

• Используйте live-binding, но постройте его, используя шаблон, подобный следующему:

  var i=0; function loop() { while(i < source_list.length) { list_in_live_binding_context.push.apply( list_in_live_binding_context, source_list.splice(i, 20) ); i += 20; setTimeout(loop, 4); } }

• Выполните одно из двух предыдущих действий, но скрывайте результаты за экраном с помощью счетчика, пока не закончится рендеринг.

• Используйте jquery-ui-scrollable ( https://github.com/bseth99/jquery-ui-scrollable), чтобы определить, когда элементы были прокручены, - используйте помощник Stache, чтобы визуализировать элементы только после прокрутки для просмотра., но сначала вам нужно зарезервировать место. Это может быть полезно, если с каждой отдельной строкой связан сложный рендеринг. Вы можете отложить детали, пока они не понадобятся.

Извините, это не простой ответ, но это не простая проблема.:) HTH, во всяком случае.