Проблема производительности в магистральном шаблоне

Question

У меня проблема с производительностью шаблона магистрали.

Ситуация такова, что у меня есть коллекция моделей, у каждой модели есть поле с именем 'isSelected'.

Мне нужно визуализировать эту коллекцию с шаблоном для каждой отдельной модели. Поле isSelected используется для установки флажка в шаблоне.

Ради обсуждения шаблон выглядит следующим образом.

<div class='thumbnail'>
  <input class='checkbox' type='checkbox' {[ if (isSelected) { ]} checked='checked'{[ } ]}
</div>

Когда мне нужно установить флажок, я обновлю поле до true для каждой модели в коллекции.

Я использовал код

this.collection.each(function(e) {
    e.set("isSelected", true);
});

Однако этот путь очень медленный: для коллекции, содержащей 25 предметов, потребуется около 10 секунд, чтобы все флажки были «отмечены».

Я ожидаю, что это должно быть не менее 1 секунды, если я использую обычный jquery.

Есть ли проблемы с этим подходом? Каков наилучший подход для такой проблемы?

Answer 1

Трудно сказать, что занимает все время обработки с количеством кода, который вы разместили.Моим первым предположением будет то, что функция рендеринга вызывается несколько раз.Создание и уничтожение шаблонов снижает производительность.Если вы написали больше кода, может быть легко обнаружить проблемные области.

Вы должны отобразить все узлы HTML, которые могут потребоваться.После того, как они будут обработаны, сохраните селектор jquery и используйте его для переключения выбранного.

В большинстве случаев узким местом является не JS или Backbone.Дело в том, что JavaScript запускает DOM, CSS или перекомпоновки, а браузер выполняет слишком много работы.

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

Answer 2

Почему бы вам не установить isSelected на true по умолчанию в модели? Таким образом, вам не нужно перебирать коллекцию, чтобы установить для каждого из них значение true.