Как оптимизировать длинную страницу сайта?

Question

[Томас Джефферсон]

У меня есть сайт-таблица, на которой есть форма для ввода подгружаемых строк данных для этой таблицы, и при подгрузке более 1000 строк, происходит задержка на отрисовку страницы, примерно 3 и более сек, и после отрисовки страница начинает лагать, как это оптимизировать, и как поставить гифку загрузки до отрисовки всех данных, которые запросил пользователь?

Answer 1

[rPman]

Делай предварительную загрузку строк, т.е. вместо 1000 строк сразу грузи 2000 или больше (подбирать эмперически под стиль использования таблицы), но показывать продолжай только 1000, как окно среди уже загруженных.

При пролистывании вниз запускай ajax запрос подзагрузки данных ниже, при пролистывании вверх - выше, таким образом пока пользователь смотрит данные, приложение их подгружает.

p.s. так у тебя отрисовка тормозит? 3 секунды - это очень много, что ты там делаешь ?

Comments

[Томас Джефферсон]

Делай предварительную загрузку строк, т.е. вместо 1000 строк сразу грузи 2000 или больше (подбирать эмперически под стиль использования таблицы), но показывать продолжай только 1000, как окно среди уже загруженных.

У меня уже есть все данные, они хранятся в массиве, просто на отрисовку этих данных, которые пользователь запрашивает, происходит задержка, так как данных много, и после отрисовки страница немного лагает, снизит ли show/hidden нагрузку на отрисовку? если да, то я бы применил этот стиль для не видимых данных пользователю, что бы страница не лагала.

При пролистывании вниз запускай ajax запрос подзагрузки данных ниже, при пролистывании вверх - выше, таким образом пока пользователь смотрит данные, приложение их подгружает.

Как я уже говорил, страница нечего не запрашивает, у меня уже есть все эти данне, и использовать ajax бессмысленно, лагает из за большого количества строк на отрисовке

[rPman]

Правь код отрисовки, 3 секунды это ненормально

Отличный пример, создавай не поэлементно dom, а блоками, набираешь в виде строки html - вставляешь (например построчно тег tr)

Еще момент, вместо рисования миллиона ячеек таблиц с данными, можно один раз отрендерить все, а затем менять их значения при скролинге. Заранее пропиши, чтобы размер ячеек не менялся от содержимого.

Операции, меняющие структуру dom (положение на странице, размер) самые медленные

p.s. ты говоришь у тебя еще сама страница лагает, что ты там такое сделал?

если прямо так надо, рисуй все сам на канвасе, это самое быстрое.

[Томас Джефферсон]

Правь код отрисовки, 3 секунды это ненормально

Отрисовка делается с помощью цикла, при каждой итерации цикла отрисовывается одна строка, и так далее, если в массиве более 1000 строк, то он отрисовывает их все, а как еще писать такую логику?

Отличный пример, создавай не поэлементно dom, а блоками, набираешь в виде строки html - вставляешь (например построчно тег tr)

Так и есть, у меня отрисовывается не каждая ячейка, а каждая строка.

Еще момент, вместо рисования миллиона ячеек таблиц с данными, можно один раз отрендерить все, а затем менять их значения при скролинге. Заранее пропиши, чтобы размер ячеек не менялся от содержимого.

А как сделать так что бы при скролле менялись данные с уже существующей таблицы? появится ли а таком случае скрол линия с права?

p.s. ты говоришь у тебя еще сама страница лагает, что ты там такое сделал?

Страница лагает из за большого количества строк, страница становиться длинной, к примеру при докгрузке всех 3000 строк с массива, на отрисовку требуется примерно 3-4 сек, а сама ятраница имеет длину более 93 600px, из за этого и лагает

[rPman]

Обработкой прокрутки (и даже рисовать но это уже не обязательно, можно сделать тонкий div со скроллером) придется заниматься самому, ловишь событие движения скрола, вычисляешь на сколько нужно сдвинуть окно, и в цикле просто меняешь text в ячейках (если dom меняться не будет, то все произойдет очень быстро).

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

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

93 тысячи пискселов, при реальных размерах экрана в пару тысяч, это очень много! браузер на простое поддержание такой страницы (двойной экранный буфер) тратит очень много оперативной памяти, вне зависимости от того что на ней нарисовано.

Answer 2

[Василий Васильев]

Рендер большого количества строк сильно садит производительность, пробуй отображать одновременно не все строки. Можно использовать либы вроде этой или гугл 'js virtualized scroll table'

Comments

[Томас Джефферсон]

можете в кратце описать, что делается по этой ссылке, и что делает "js virtualized scroll table"

[Василий Васильев]

Грубо говоря - у тебя загружены 1000 строк по 45пикс высотой каждая. Итого - 45к пикселей в высоту. Делаешь вьюпорт высотой в, например, 200 строк - это 9к пикселей в высоту, и рендеришь только те строки, которые влазят в размеры этого вьюпорта(+ зазор в несколько строк, чтобы не было артефактов при скролле). При скролле рендеришь следующие `n` елементов, а предыдушие `n` елементов сносишь, ну и аджаксом подгружаешь по необходимости.
При этом производительность остается константой, хоть миллиард строк подгружай.
По ссылке есть наглядные примеры + код, можно потыкать.