Как вывести на страницу 5000 строк безболезненно?

Question

[Юпитер Макс]

Всем привет. Мне на страницу нужно вывести 5000+ строк текста. При загрузке страница заметно притормаживает. Есть вариант сделать это более мягче? ))

Comments

[Дмитрий]

Разбить по страницам, а тормозить ещё будет сам арбузер

[Юпитер Макс]

Дмитрий, такой вариант уместен, но не в моем случае. В этом и проблема ))

[Сергей Соколов]

Какая часть этих строк становится видна сразу без прокрутки?
Стоит сразу показвывать только их. Остальные дорисовывать сразу после показа видимого.

5000 это только текст или там вовсю используются стили, разметка, шрифты необычные?

[Юпитер Макс]

Сергей Соколов, да там ничего нет. кроме чекбоксов. Хотя, заметил, если их убрать, страница залетает без проблем))

Answer 1

[profesor08]

Единственное решение в данному случае это показывать на экране ограниченный список элементов, постепенно добавляя/убирая те которые видно/не видно. Придется программировать на js или искать готовое. Со стороны пхп передавать только голые данные без html оберток и тд.

Answer 2

[Владимир Коротенко]

Самый дубовый вариант вот этот https://jsfiddle.net/vkorotenko/9p01m5bt/
Можно сделать вариант с "Виртуальным скурулом".
Суть в том что весь текст считается, но в окно видимое пользователю попадает только маленький кусочек. После выхода за окно видимости он удаляется. Соответственно все это вы обсчитываете на клиенте. И программируете ползунок прокрутки.

Comments

[Юпитер Макс]

да, хороший вариант. Но все таки хрен с ним. Решили оставить как есть. Теперь вопрос в другом. Нужно в строке поиска, которая будет перед списком, сделать так. чтобы Набирая название, скролилсоь к строке с совпадением )))

[Владимир Коротенко]

Юпитер Макс, SO всегда поможет

$(window).scrollTop($("*:contains('Are you a Lib Dem or Tory'):last").offset().top);

Answer 3

[#ямыnginx]

Постепенно добавлять через jquery, он асинхронный.
Да и вообще, мне кажется, с точки зрения SEO это убьет сайт.

Comments

[Юпитер Макс]

1. А по подробнее можно про постепенность? ))
2. Эта страничка в seo не нуждается, ее видит ограниченный список людей.

[Пашенька]

Юпитер Макс, это ничего не даст - в конечном итоге всёравно будет 5000 строк. Здесь вопрос в количестве нод. Покажите разметку, что вы выводите. Или суть именно в смягчении загрузки страницы?

[Юпитер Макс]

like-a-boss, да собственно ничего особенного

<div class="name-cat" style="margin-bottom:10px; font-size:13px;">
	<input id="<? echo $i; ?>" type="checkbox" name="pr-lst" value="<? echo $arFields["ID"]; ?>" />
	<label style="font-weight:normal;" for="<? echo $i; ?>"><? echo $arFields["NAME"]; ?></label>
</div>

[Пашенька]

Юпитер Макс, то есть на одну запись 3 ноды. 3*5000=15k, в то время, когда рекомендуется на странице иметь до 1500 нод. Скорее всего это будет тормозить даже в сыром виде без какого-либо джаваскрипта на странице.

[Одиночка Айс]

Юпитер Макс, форма из 5000 полей? 0_о

[Noname]

Одиночка Айс, суровые заказчики из СНГ и не такое запросят)

[Александр Афанасьев]

А почему это убьет сайт с точки зрения сео?
Например на пикабу есть подгрузка контента по мере скролла, вроде живет...

Answer 4

[FanatPHP]

Очень просто.
Надо всего лишь уменьшить количество рюшечек, бантиков и колокольчиков. Отказавшись от всех этих яваскриптиков, сортировочек, онлайн редактирований и прочего.
Также надо отказаться от таблиц и формировать страницу из независимых блоков.

Comments

[Андрей]

Воо, единственно правильный ответ! :)
5 тыс строк - ну не так уж чтобы много, если это просто текст без всяких там обработочек на джаваскриптике

[profesor08]

Андрей, 5 тыс строк не так много, если там нет элементов форм.

Answer 5

[xxiwebdevelop]

Если эту задачу поставил Вам Ваш клиент, то срочно откажитесь от такого клиента! Вот Вы сами представьте вы заходите на страницу сайта а там 5000 строк и пол километра скролить вниз да я 3 раза максимум проскролю мышкой и закрою нафик этот сайт=)