Как лучше добавлять новые элементы на страницу через js?
Допустим,из базы выбирается 200 элементов. Сразу нужно показать 20, остальное нажимая кнопки "Показать", "Скрыть".
1. Я могу вывести все 200 элементов, но последним 180 прописать diplay: none
2. Я могу вывести 20 элементов, а остальные добавлять из массива, переданного в функцию js по мере надобности.
3. Через ajax. Тут страница замедлится.
Всеми этими способами можно работать или какими-то не рекомендуется.
Чем второе от третьего отличается?
Если имеется ввиду загрузка мета-данных, но ещё не прикрепление к контенту страницы, то второй будет оптимальным. Вам не нужно будет тратить время на ожидание аякс-ответа, т.к. инфа о элементах и их контенте уже будет загружена, и у вас не будет преждевременной загрузки неотображаемого контента (изображений этих 180 элементов, к примеру).
С точки зрения SEO, если эти 180 элементов не имеют собственных URL и и недоступны поисковику, то лучше первый способ.
1. Я могу вывести все 200 элементов, но последним 180 прописать diplay: none
Не делай так никогда!
Буквально на днях некие люди искали такого же криворукого мамкиного программиста, который нажуевертил один-в-один из твоего описания, там еще и движок сам по себе тяжелый.
Страница со списком товаров выдается через 10-15 секунд
Представляете какие убытки несет владелец бизнеса?
Некие люди нашли горемыку и отдали владельцу.
Сидим посматриваем по телику за криминальной хроникой...
)))
1. Подгружайте на N элементов больше чем помещается на странице и отображаете их все.
2. Вешаете обработчик на прокрутку, и если область отображения приблизилась к последнему отрисованному элементу ближе чем на M, то подгружаете еще N элементов и отрисовываете их.
3. По желанию или если отображаемый список может быть очень большим можете удалять элементы, отстоящие от области просмотра на N позиций.
N и M определяете с таким расчетом, чтобы минимизировать время ожидания пользователем новой порции данных. В идеале подобрать так, чтобы докрутив до границы, следующая партия была уже подгружена и отображена. Следуеть заметить, что скорость подгрузки данных может сильно плавать в зависимости от множества не зависящих от вас параметров, так что идеально подобрать параметры не выйлет.
Параметры M и N чистая условность, в реальности вы можете сделать для каждой ситуации свой параметр, и даже сделать его вычисляемым в зависимости от текущей скорости подгрузки.
Когда бэкенд хорошо работает, пользователь не способен заметить ajax-запрос. В крайнем случае спокойно отнесётся к секундному появлению спинера. Так что нет, в третьем варианте страница не замедлится. Зато она замедлится в первых двух случаях, если у вас в базе станет не 200 элементов, а хотя бы 2000, не говоря уж о 20 миллиардах. А ещё веселее то, что такая выборка из базы может колом поставить вообще всех пользователей.
