У меня есть страница агрегатора новостей с несколькими фильтрами. В фильтре компаний большое количество компаний. При нажатии кнопки + в Chrome для расширения списка и просмотра списка компаний требуется 6-8 секунд, чтобы весь список стал видимым. В Firefox список отображается почти мгновенно. Может ли кто-нибудь помочь мне выяснить, что может быть причиной разницы во времени загрузки в разных браузерах?
Что может вызвать разницу в скорости загрузки фильтра между Chrome и Firefox?
Ответы (2)
Вам нужно улучшить производительность поиска узлов DOM:
$newsFilterRow.on('click', '.js-filter-more', function(event) {
var $this = $(this)
var $items = $this.closest($newsFilterRow).find($newsFilterItem).filter(':hidden');
var tmp = $items.splice(0, 56);
$(tmp).addClass(newsFilterItemVisibleClass).css('display', 'inline-block');
if ($items.length === 0) {
$this.remove();
}
});
Вы используете .find() и .filter()
Я предлагаю изменить эти фильтры, чтобы повысить производительность в Chrome.
ваша переменная $items имеет нулевую длину во всех случаях, НО для компании.
var $items = $this.closest($newsFilterRow).find($newsFilterItem);
function animate0() {
var tmp = $items.splice(0, 56);
....
для пустых массивов объединение внутри пустого массива дешево, нет перераспределения памяти/или чего-то еще.. но для вашего случая Company вы соединяете непустой массив с каждым кадром анимации.. это вызывает медлительность.
Кроме того, рассмотрите возможность кэширования ресурсов и выполнения поиска в DOM вне анимации. Слишком много манипуляций с DOM происходит внутри анимации.
Вероятно, Firefox делает снимок экрана массива для операций анимации... но это всего лишь предположение из-за разницы в производительности.