Как обрабатывать сотни тысяч элементов DOM на странице? - PullRequest
3 голосов
/ 08 июля 2011

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

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

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

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

Ответы [ 2 ]

1 голос
/ 08 июля 2011

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

1 голос
/ 08 июля 2011

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

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

...