Будет ли изотопная фильтрация хорошо работать с несколькими сотнями элементов и несколькими категориями?

#javascript #jquery #performance #jquery-plugins

#javascript #jquery #Производительность #jquery-плагины

Вопрос:

Я надеюсь использовать плагин Isotope Jquery (http://isotope.metafizzy.co /) для отображения и фильтрации нескольких сотен элементов (около 700). Каждый элемент будет содержать уменьшенное изображение и имя и может фильтроваться по трем категориям. (Чтобы страница не была смехотворно длинной, все это будет содержаться внутри прокручиваемого div).

Если возможно, я хотел бы также включить эффект анимации (используя «наилучший из доступных» движок анимации, который будет использовать JS, если переходы CSS3 недоступны).

Я протестировал ее локально примерно с 100 элементами, и она работает очень быстро в Chrome, а анимации CSS3 и JS довольно быстрые. Но я беспокоюсь, что там, в дикой природе, это может оказаться неприемлемо медленным для старых клиентов и браузеров (и, конечно, у нас очень сжатые сроки, поэтому не так много времени для создания лучшего прототипа!).

Есть ли у кого-нибудь опыт ее использования в подобном масштабе?

Спасибо,

Питер

1. Просто для дополнительной информации, я должен был упомянуть, что в IE7 на компьютере с Win XP, которому несколько лет (т. Е. Тип клиента, которого все еще существует огромное количество), она должна быть достаточно отзывчивой, но нам действительно не нужно беспокоиться о IE6 (или более старой версии). В любом случае, я просто очень надеюсь на чей-либо предыдущий опыт или примеры, на которые я мог бы взглянуть, и я мог бы определить скорость самостоятельно. Спасибо.

Ответ №1:

Я бы рекомендовал, чтобы количество ваших элементов составляло не более 50 элементов, если вы выполняете фильтрацию или сортировку. Это не значит, что вы можете попробовать нажать на нее. Например, количество элементов в Leafly близко к 300.

Ответ №2:

Хорошо, теперь я могу ответить на свой собственный вопрос, потому что мы пытались его создать. Ответ заключался в том, что это было слишком медленно практически во всех браузерах, кроме Chrome, где это было почти приемлемо. Даже в Firefox на быстродействующем ноутбуке Mac загрузка страницы с нуля занимала примерно 5 секунд и не намного меньше, чтобы вернуть фильтрам значение «все». Он даже выдал предупреждение скрипта о том, что он не отвечает на запросы нескольких людей, которые проверили его в Safari и IE.

Поэтому я переписал его, чтобы просто добавить / удалить класс ‘hide’ для каждого элемента вместо этого. При быстром сравнении это получается примерно на 50% быстрее. Очевидно, что при этом теряется вся причудливая анимация. Поэтому я бы рекомендовал Isotope для небольших наборов данных, где важны эффектные визуальные эффекты, но не для работы с сотнями элементов.