SVG прямоугольник против div против холста - PullRequest
Новая
       34

SVG прямоугольник против div против холста

6 голосов
/ 26 августа 2011

Только представьте, что вы строите Карты Google для плана здания большого здания с 3000 комнатами.

Мне нужно отобразить до 3000 прямоугольников (лучше всего было бы также иметь возможность рендерить случайные многоугольники, но на данный момент это не самая большая проблема). К каждому из них должны быть прикреплены события, такие как наведение мыши и щелчок, которые будут иметь некоторые эффекты для других элементов dom на странице. Мне также нужно иметь возможность увеличивать и уменьшать масштаб.

Я знаю, что могу сделать это с помощью SVG (Raphael.js), рендеринга простых div-ов или canvas.

Мне интересно, есть ли у кого-то конкретные рекомендации для того, что я пытаюсь построить. Он должен отображаться достаточно быстро (около 1 секунды или около того) в самых медленных браузерах. (IE8, Firefox 3.6 и, надеюсь, IE7, хотя я не мечтаю слишком много ...)

Спасибо за помощь, Николя.

PS: До сих пор я видел, что рендеринг 3000 прямоугольников занимает в IE8 до 7 секунд с Raphael.js, что довольно медленно. Также кажется, что рендеринг простого div в IE8 быстрее в 6 раз.

1 Ответ

7 голосов
/ 27 августа 2011

3000 DOM-объектов с прикрепленными событиями будет очень болезненным для некоторых машин.Как правило, как только вы попадаете в диапазон «тысяч», производительность решений на основе DOM (divs, SVG) становится действительно плохой.Почти невозможно получить хорошее время загрузки с таким количеством элементов DOM.

Производительность самого excanvas также очень плохая.Во-вторых, есть какая-то анимация, а исполнение excanvas становится ужасным.Так как excanvas просто имитирует Canvas, создавая VML (SVG), он будет по крайней мере столь же медленным (и почти всегда медленнее), чем просто SVG / VML.

Смотрите мой ответ здесь для подробного анализа: HTML5 Canvas против SVG и div

Я считаю, что одно из требований в вашем списке должно быть выполнено.Количество объектов, производительность или платформа.

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

...