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

Question

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

Ситуация У меня есть коллекция модели, каждая модель имеет поле под названием «isSelected».

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

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

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

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

Код я использовал

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

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

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

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

Answer 1

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

Answer 2

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

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

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

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