Наше мобильное веб-приложение включает в себя интерактивный дизайнер, который мы реализовали с помощью HTML5 canvas и Kinetic.js. Мы пытаемся динамически отображать на холсте около 353 объектов, из которых 178 являются текстом, а остальные — линиями и прямоугольниками.
Во время операции панорамирования или масштабирования холст перестает отвечать на запросы. Похоже, такое поведение проявляется только на устройстве Android, так как то же самое работает исключительно хорошо на IOS. Мы также попробовали одно и то же приложение через браузеры напрямую и заметили похожее поведение без ответа в браузере Android и Chrome. Firefox сравнительно отзывчив.
Мы попробовали варианты, указанные в следующих ссылках, но проблема не устранена (например, несколько слоев холста) 1) Низкая производительность с кинетическими js 2) Проблемы производительности с HTML5 Canvas в некоторые мобильные браузеры.
Подход, указанный в ссылках KineticJS — перемещение 4000 плиток с помощью Stage. перетаскиваемый , Как кэшировать весь слой прямо перед запуском перетаскивания и вернуть его обратно на dragend? кажется многообещающим, но мы не сможем пойти с этим, так как наш дизайнер будет содержать довольно много пользователей взаимодействия (например, перетаскивание разделов рисования).
Я также нашел здесь еще один вопрос со ссылкой на аналогичную проблему zoom-is-unre">https://stackoverflow.com/questions/18853952/kinectic-js-performance-on-android-4-1-devices-особенно-pan-and-zoom-is-unre
Есть ли какие-либо другие возможные решения/исправления для улучшения этой производительности, пожалуйста, помогите.
РЕДАКТИРОВАНИЕ. Мы протестировали наше приложение на следующих устройствах: 1) Samsung Note 800 (Android 4.1.2) 2) Samsung Tab 2 (Android 4.1.2) 3) ASUS Transformer Pad TF300TG (Android 4.2.1). ) и 4) Nexus 7 (Android 4.3).
