Количество описанных вами элементов svg, безусловно, может создать проблему с точки зрения потребления памяти.
В отличие от элемента canvas, SVG требует, чтобы браузер поддерживал объектную модель для всех представленных элементов. Эта объектная модель упрощает привязку события к щелчку определенного элемента. Вам не нужно отслеживать, где находится квадрат на экране, насколько он велик, масштабируется и т. д. Однако это происходит за счет требований к памяти и резко контрастирует с тегом холста, который просто беспокоит. о том, каким цветом рисовать пиксели, и вам нужно беспокоиться об отслеживании того, какой «объект» был нажат.
Итак, пытаясь выяснить, будет ли производительность проблемой, обычно разумно начинать с наименьшего общего знаменателя, так сказать, с точки зрения вашего целевого оборудования. Вы ориентируетесь на мобильные устройства? Вы ориентируетесь на ноутбуки и настольные компьютеры?
Получив ответ на этот вопрос, создайте фиктивное приложение, предназначенное для этого оборудования, которое использует один фиктивный график (100 точек данных) снова и снова 60 раз. Создавайте достаточно, чтобы вы могли взаимодействовать с дисплеем таким образом, который отражает то, как ваши пользователи будут взаимодействовать с ним (если вы хотите, чтобы пользователи могли перемещать графики, это должно быть включено и т. д.)
Используя этот упрощенный прототип, теперь попробуйте использовать базовое взаимодействие, и если производительность соответствует вашим требованиям (т. е. ожиданиям аудитории вашего приложения).
Что касается повышения производительности приложения такого рода, я бы предложил использовать комбинацию ajax и svg. Я бы генерировал эскизы графиков (используя SVG, они были бы намного меньше благодаря уменьшенной детализации), и когда пользователь решит получить больше деталей, я бы использовал ajax, чтобы получить более подробное SVG-представление этого конкретного график.
Наслаждайтесь созданием своего приложения :)
person
AdamJonR
schedule
18.02.2011
