Как обрабатывать сотни тысяч элементов DOM на странице?

Question

Я работаю над инструментом выравнивания последовательности белка/ДНК для некоторых ученых здесь, на работе. Это началось как простой табличный вид их файлов выравнивания. Поэтому у меня была бы одна строка таблицы со строкой внутри нее для каждой последовательности. Но тогда они в основном хотели иметь возможность выполнять выравнивания от самого компонента, и внезапно каждый символ в последовательности должен был быть элементом span.

Имея только несколько последовательностей на странице, браузер остается плавным. Но когда число последовательностей идет примерно до 60 (> 100 тыс. Элементов DOM), браузер начинает разыгрывать. Я могу сказать, что прокрутка больше не гладкая, а прокрутка - важная операция на этой странице.

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

Итак, мой вопрос: как вы, парни, обрабатываете огромное количество элементов DOM? Я думал об использовании Canvas или Flash или какого-либо другого решения без DOM, но мне интересно, есть ли способ сохранить его в DOM.

Answer 1

Element повторное использование! Вместо создания span для каждого символа последовательности создайте достаточно для текущего дисплея плюс буфер выше и ниже, скажем, 1 страницы. Сначала сохраните свои данные в JavaScript (например, в массиве JS). Заполните начальный набор элементов из массива во время загрузки. Затем, когда элементы прокручиваются со страницы, повторно используйте строки, содержащие элементы DOM, перемещая их в нижней части страницы и заполняя их данными через JavaScript.

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

Answer 2

Try, чтобы показать не все эти элементы, но детали, установить обработчик на событие прокрутки, и когда это было в последний или первый видимый элемент показать другую часть элементов и скрыть другое, что уже не важно (видимость: скрытый)