Я работаю над дизайном, который показывает прокручиваемое поле со списком "контактов" пользователя.
Пользователи могут иметь до 10000 контактов.
Пока предположим, что все контакты уже находятся в памяти, и я просто пытаюсь их нарисовать. Если вы хотите прокомментировать вопрос о том, как разумно загружать 10 тыс. Элементов данных в браузере, сделайте это здесь .
Существует два метода управления огромным списком, подобным этому, внутри прокручиваемого блока.
Просто загрузите их все
Этот кажется тем, как gmail подходит для отображения контактов. В настоящее время у меня есть 2k контактов в Gmail. Если я нажимаю «все контакты», я получаю небольшую задержку, затем прокручиваемое поле справа начинает заполняться контактами. Похоже, что они разбивают задачу на куски, вероятно, разделяя добавления DOM на более мелкие этапы и помещая эти этапы в таймауты, чтобы не заморозить весь интерфейс, пока процесс завершается.
плюсы:
- Простота реализации
- Использует собственные элементы пользовательского интерфейса так, как они были предназначены для использования
- Google это делает, должно быть все нормально
минусы
- Не совсем быстро - есть некоторая задержка, даже на моей машине разработки под управлением Firefox. Вероятно, для пользователя, работающего на более медленной машине с IE6
- Я не знаю, какие существуют ограничения в том, насколько велик я могу позволить DOM расти, но мне кажется, должно быть некоторое ограничение на количество узлов, которые я могу добавить к нему. , Как отреагирует старый браузер на старой машине, если я попрошу, чтобы он содержал 10 000 узлов в DOM?
Рисовать по мере необходимости
Похоже, что Yahoo имеет дело с отображением списков контактов. Создайте прокручиваемый блок, поместите в него сверхвысокую пустую метку-заполнитель и рисуйте контакты только тогда, когда пользователь прокручивает, чтобы показать их.
плюсы:
- DOM-узлы отрисовываются только по мере необходимости, поэтому при загрузке происходит очень небольшая задержка и гораздо меньше риск перегрузить браузер слишком большим количеством DOM-узлов
минусы:
Более сложная реализация и больше возможностей для ошибок. Например, если я быстро прокручиваю в диспетчере почтовых контактов Yahoo сразу после загрузки страницы, я могу получить контакты для загрузки друг над другом . Конечно, ошибки могут быть устранены, но очевидно, что этот подход будет вводить больше ошибок.
Существует возможность добавить огромное количество DOM-узлов. Если пользователь медленно прокручивает весь список, каждый элемент будет нарисован, и мы все равно получим огромный DOM
Существуют ли другие распространенные подходы для отображения огромного списка? Есть ли плюсы или минусы с каждым подходом, чтобы добавить? Есть ли опыт / проблемы / успех с использованием любого из этих подходов?