Вопрос по javascript, performance, dom – Производительность с бесконечной прокруткой или много элементов дом?

http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

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

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

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

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 и вызова этих методов. Эти функции вызывают перерисовку, поэтому выувидим проблему с производительностью.

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

Создать

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

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

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

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

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