Производительность с бесконечным прокруткой или множеством элементов dom?

Ответ 1

Нет опыта с этим, но здесь есть несколько полезных советов: http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

Я взглянул на Facebook, и они, похоже, ничего не делают, в частности, в Firefox. При прокрутке вниз элементы DOM в верхней части страницы не меняются. Использование памяти в Firefox увеличивается до 500 мегабайт, прежде чем Facebook не позволит вам прокручивать дальше.

Twitter выглядит так же, как Facebook.

Google Maps - это другая история, из которой выходят карты из поля зрения, удаляются из DOM (хотя и не сразу).

Ответ 2

Нам пришлось столкнуться с аналогичной проблемой на FoldingText. По мере того, как документ становился все больше, было создано больше элементов линии и связанных элементов span. Механизм браузера просто задыхался, и поэтому нужно было найти лучшее решение.

Вот что мы сделали, может быть или не быть полезным для ваших целей:

Визуализируйте всю страницу как длинный документ и окно просмотра браузера в качестве объектива для определенной части длинного документа. Вам действительно нужно показать только часть объектива.

Итак, первая часть предназначена для вычисления видимого порта. (Это зависит от того, как ваши элементы размещены, абсолютные/фиксированные/по умолчанию)

var top = document.scrollTop;
var width = window.innerWidth;
var height = window.innerHeight;

Еще несколько ресурсов, чтобы найти более видовое окно на основе нескольких браузеров:

Получить размеры окна просмотра браузера с помощью JavaScript

Кросс-браузерный метод обнаружения scrollTop окна браузера

Во-вторых, вам нужна структура данных, чтобы знать, какие элементы видны в этой области

У нас уже есть сбалансированное двоичное дерево поиска для редактирования текста, поэтому мы также расширили его для управления высотами строк, поэтому эта часть для нас была относительно простой. Я не думаю, что вам понадобится сложная структура данных для управления высотами элементов; простой массив или объект могут работать нормально. Просто убедитесь, что вы можете легко запросить высоты и размеры. Теперь, как бы вы получили данные о высоте для всех ваших элементов. Очень простой (но вычислительно дорогой для большого количества элементов!)

var boundingRect = element.getBoundingClientRect()

Я говорю с точки зрения чистого javascript, но если вы используете jQuery $.offset, $.position и методы, перечисленные здесь было бы очень полезно.

Опять же, использование структуры данных важно только как кеш, но если вы хотите, вы можете сделать это "на лету" (хотя, как я уже сказал, эти операции дороги). Кроме того, остерегайтесь изменения стилей CSS и вызова этих методов. Эти функции принудительно перерисовывают, поэтому вы увидите проблему с производительностью.

Наконец, просто замените элементы на экране одним синглом, например <div> с вычисленной высотой

• Теперь у вас есть высоты для всех элементов, хранящихся в вашей структуре данных, запросите все элементы, которые лежат до видимого видового экрана.

• Создайте <div> с заданной высотой css (в пикселях) до суммы высот элемента

• Отметьте его именем класса, чтобы вы знали его наполнитель div
• Удалите все элементы из dom, чтобы этот div закрывал
• вставьте этот вновь созданный div вместо

Повторите для элементов, которые лежат после видимого видового экрана.

Ищите события прокрутки и изменения размера. В каждом прокрутке вам нужно будет вернуться к своей структуре данных, удалить разделители-заполнители, создать элементы, которые ранее были удалены с экрана, и соответственно добавить новые разделители-заполнители.

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

TL;DR

Я не уверен, что объяснил это правильно, но суть этого метода:

• Знайте вертикальные размеры ваших элементов.
• Знайте прокрученный порт представления
• Представлять все элементы вне экрана с одним div (высота, равная сумме всех высот элементов, которые она покрывает)
• В любой момент времени вам понадобится два divs, один для элементов над видимым окном просмотра, один для элементов ниже.
• Следите за порт просмотра, прослушивая события прокрутки и изменения размера. Заново создайте divs и видимые элементы.

Надеюсь, что это поможет.

Ответ 3

Это 2019. Вопрос действительно старый, но я думаю, что он все еще актуален и интересен, и, возможно, что-то изменилось на сегодняшний день, поскольку мы все сейчас также склонны использовать React JS.

Я заметил, что временная шкала Facebook, похоже, использует кластеры контента, который скрыт с display: none !important как только кластер выходит из поля зрения, поэтому все ранее визуализированные элементы DOM сохраняются в DOM, просто эти зрения скрыты с помощью display: none !important. Кроме того, общая высота скрытого кластера устанавливается div родительскому div скрытого кластера.

Вот несколько скриншотов, которые я сделал:

Что вы думаете об этом подходе в 2019 году? Кроме того, для тех, кто использует React, как это может быть реализовано в React? Было бы здорово получить ваши мнения и мысли относительно этой сложной темы.

Спасибо за внимание!