Эффективное представление большой сетки в браузере

Question

Мне нужно отобразить и управлять в браузере сеткой из 10 000 простых ячеек (скажем, 100 на 100).Эти клетки в основном представляют собой просто цветной прямоугольник.Манипуляции включают в себя изменение цвета ячеек с помощью Javascript, обработку клика по каждой ячейке и т. Д. Используя 1 деление на ячейку и 1 деление, чтобы обернуть группы ячеек в ряд, я могу получить до 10 000 элементов DOM, но это все еще довольномного.Я обеспокоен производительностью даже более быстрых функций DOM, таких как getElementById.

. Первоначальный вопрос: сохраню ли я все необходимые ссылки на элементы DOM в массиве Javascript (например, массив из 10 000 элементов, одинэлемент для каждой ячейки) и манипулировать CSS для каждого элемента, есть ли у этого молитва о том, чтобы быть быстрым, как это было бы, когда DOM имеет, скажем, 200-500 элементов?

Итак, яЯ ищу предложения о том, как я мог бы показать эту сетку 100 х 100 более эффективно.Я рассмотрел использование canvas и рисование каждой ячейки с использованием Javascript, но я не уверен, насколько быстрее это будет на самом деле, особенно когда приходит время редактировать стиль ячеек.Я также не очень склонен использовать canvas, потому что он не полностью кросс-совместим (читай: @ #% $ ing IE), и в какой-то момент мне, вероятно, понадобится сделать эту вещь IE-совместимой.

Что ты думаешь?

Answer 1

См. Сетка данных JavaScript для миллионов строк или, короче, используйте SlickGrid - http://github.com/mleibman/slickgrid

Answer 2

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

Другой альтернативой является отображение только того, что пользователь может видеть в данный момент. что-то вроде виртуальной библиотеки области прокрутки может быть полезным. Идея состоит в том, чтобы визуализировать (создавать элементы div) только для области, которую может видеть пользователь. Google

Answer 3

Для чего бы то ни было, есть вероятность, что вы можете использовать границы, чтобы один <div> представлял три или более областей.Хотя было бы неудобно обеспечивать кросс-браузерную совместимость (учитывая различия между Trident, Gecko, Webkit и Presto).

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

Кроме того, лично я бы протестировал создание этого с доступными вам опциями для таблиц, div,списки (вероятно, ul, но это, конечно, зависит от вашего варианта использования) ... а затем просто перейдите к тому, что вы считаете самым быстрым.

Я бы рекомендовал использовать CSS-спрайты для фона/ раскраска каждой ячейки, если она будет иметь предсказуемую ширину по высоте, просто для сохранения некоторой полосы пропускания В ответ на вопрос в комментариях:

Чтобы один div генерировал цвет для трех областей, предполагая фиксированную высоту / ширину каждого div в 100 пикселей.

div#3areas
{width: 100px;
height: 100px;
background-color: #f00; /* for the vertically-centred area */
border-top: 100px solid #00f;
border-bottom: 100px solid #0f0;
}

Должно сгенерировать что-то вроде:

+------------------------+
|                        |
|      border-top        |
|        (#00f           |
+------------------------+
|                        |
|      central content   |
|       area (#f00)      |
+------------------------+
|                        |
|      border-bottom     |
|         (#0f0)         |
+------------------------+

Но, вероятно, этого не произойдет, из-за различных способов обработки границ браузерами, см .: http://www.cssplay.co.uk/boxes/borders.html (хотя это довольно устарело, поскольку написано, что IE6, Mozilla 1.5 и Netscape 7 были признаны достойными комментариев).