Работа с большими коллекциями Backbone

1. Да, при просмотре около 10 000 элементов старые браузеры плохо справлялись с отображением. Мы думали, что это проблема с пропускной способностью, но даже локально, с такой пропускной способностью, которую может выдать высокопроизводительная машина, Javascript просто потерял сознание. Это было верно для Firefox 2 и IE7; С тех пор я не тестировал его на больших системах.

2. Мы пытались получить все. Это не работало для больших наборов данных. Особенно пагубно это было с браузером Android.

3. Наши данные были в древовидной структуре, а другие данные зависели от наличия данных в древовидной структуре. Данные могут измениться из-за действий других пользователей или других частей программы. В конце концов, мы заставили древовидную структуру извлекать только видимые в данный момент узлы, а другие части системы независимо проверяли правильность наборов данных, от которых они зависят. Это состояние гонки, но в реальном развертывании мы никогда не видели никаких проблем. Я хотел бы использовать здесь socket.io, но руководство не поняло этого и не доверяло этому.

4. Поскольку я использую Coffeescript, я просто унаследовал от Backbone.Collection и создал свой собственный суперкласс, который также создал пользовательский вызов sync(). Синтаксис для вызова метода суперкласса здесь действительно полезен:

   class Dataset extends BaseAccessClass
       initialize: (attributes, options) ->
           Dataset.__super__.initialize.apply(@, arguments)
           # Customizations go here.
   

Как сказал Эльф, вы действительно должны разбивать на страницы загрузку данных с сервера. Вы сэкономите большую нагрузку на сервере, загружая элементы, которые вам могут не понадобиться. Просто создание коллекции из 10 000 моделей локально в Chrome занимает полсекунды. Это огромная нагрузка.

Вы можете поместить работу в другой физический поток ЦП с помощью рабочего процесса, а затем использовать временные объекты, чтобы отправить ее в основной поток, чтобы отобразить ее в DOM.

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

Я создаю PerfView для Backbone, который может отображать 1 000 000 моделей и прокручивать со скоростью 120 кадров в секунду в Chrome. Весь код находится на Github https://github.com/puppybits/BackboneJS-PerfView. Он прокомментирован, поэтому есть много других оптимизаций, которые вам понадобятся для отображения больших наборов данных.