Используйте тэг canvas или создайте кучу <div's> Что быстрее?

Question

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

1: использовать тег canvas для итерации по массиву и использования fillStyle и fillRect ();

или

2: перебирая массив, создавая блок div и устанавливая цвет фона div для текущего цвета в массиве.

Примечание: у меня есть 1034 цвета, и я открыт для других предложений, но он должен быть основан на сети и не может быть flash.

Answer 1

Я бы лично пошел на canvas (excanvas.js для эмуляции VML в IE подойдет). По причинам простоты и расширения кода в будущем.

Проблема в том, что браузеры с собственной реализацией canvas будут работать лучше с первым параметром, IE должен быть быстрее с использованием DIV (второй метод). Это связано с практикой эмуляции, которая создает элементы VML на лету (просто нужно создать больше элементов, чем предполагает метод DIVs only).

Хотя это всего лишь предположение :), напишите несколько тестов и сравните.

Answer 2

Я бы использовал div, если бы только для простоты использования браузера.

На самом деле, я бы попробовал сделать это на языке сервера, а затем кешировать результаты. Нужно ли клиенту взаимодействовать с этими фигурами или делать с ними что-нибудь, что сделало бы это невозможным?

Answer 3

Сделайте это в javascript с document.createElement('div') для простоты и скорости (вы не загружаете 1034 блока разметки HTML, и это будет работать везде).