Низкая производительность при прокрутке холста в div на Android

0

мой первый раз задавая вопрос здесь, этот сайт очень полезен, я просто не мог найти ответ на свою проблему.

Пожалуйста, несите меня, я полностью объясню, прежде чем представить свой вопрос :)

Я работаю над игрой html5, которая работает на рабочем столе, а также на мобильных устройствах в качестве приложения.

В части игры у меня есть холст 1500 x 1200, который отображается один раз, и он помещается где-то в DOM, в пределах div, который меньше, что позволяет прокручивать холст внутри этого div.

Это работает исключительно хорошо на настольных компьютерах и мобильных устройствах iOS. Но на Android он не очень хорошо работает. По низкой производительности я имею в виду, что для регистрации требуется секунда или два, чтобы коснуться, и затем холст отстает, когда палец движется, чтобы прокрутить его.

Я много исследовал и много тестировал:

-I удалось немного повысить производительность, отключив easeljs и связанные с ними скрипты, но остальная часть приложения нуждается в этом. Производительность -Further была достигнута путем удаления привязок от $ (документа) и других элементов. Но, тем не менее, производительность Android не соответствует производительности iOS и Desktop.

В конце концов, я получил около производительности Desktop, когда элемент canvas был удален() и добавлен в html 'body' вместо этого. Почему это? Я, очевидно, не знаю, как это происходит в игре, но мне нужно как-то снова создать это увеличение производительности.

Вот что еще более озадачивает. Снова удаление и добавление этого же элемента Canvas BACK туда, где он был в DOM, теперь по-прежнему намного лучше с точки зрения производительности. Теперь он прокручивает гораздо более плавный результат с меньшим запасом сенсорного ввода. Может кто-нибудь дать подсказки или объяснить, почему это так?

Каковы возможные причины такого поведения?

//edit: Больше объяснений о моем вопросе. Каковы некоторые основные хиты производительности на Android при прокрутке элемента? Слишком много событий, стреляющих по прикосновению? Элемент слишком глубоко в DOM? Слишком много CSS в DOM? EaselJS не играет хорошо?

спасибо

Теги:
scroll
html5-canvas
easeljs

1 ответ

1

Я чувствую твою боль. Так как большая часть этого в значительной степени черная магия в этот момент, лучшее, что я могу сделать, это связать аналогичный опыт и предложить предложения:

  • DOM, держите его как можно проще. Я обычно держу его довольно чистым. У меня были все виды проблем с прокруткой из-за некоторых ненужных инструкций CSS, оставшихся от другого подхода к компоновке. Поэтому тщательно очищайте любое время, когда вы что-то меняете.

  • Будьте предельно осторожны при переполнении. У меня было много проблем с моим первым приложением для телефонных разговоров из-за переполнения. По какой-то причине Android имеет трудное время с переполнением всего, кроме элемента html. Я полагаю, что это связано с фиксированным позиционированием, а Android <= 2 тоже не мог (нет, без прокрутки в теге non- - серьезно). У меня также были некоторые избыточные члены по переполнению (см. Предыдущий пункт), которые только обнажили производительность.

  • Попробуйте прокрутить этот элемент холста в фактическом теге HTML. Совсем недавно я переключил анимированный элемент холста из содержимого, которое прокручивалось в элементе HTML, до содержания элемента div прокрутки и сталкивалось с очень похожими проблемами с теми, которые у вас есть. Я проверю здесь, если все вернется к старому пути. Это не повлияло бы на мою настоящую проблему, но, по крайней мере, это сузило проблему.

  • Вероятно, это не связано, но для прокрутки в ситуациях салфетки слишком много прокручиваемых библиотек clobber прокрутки производительности, nuking поведение по умолчанию через <event object>.preventDefault()

  • И если при настройке вы сталкиваетесь с проблемами с прокруткой импульса (без инерции, когда вы щелкаете), см. Webkit-overflow-scrolling-touch для исправления, которое помогло мне справиться с проблемами iOS. Здесь одна достойная ссылка на это: http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

  • Кроме того, реализация холста в веб-браузере Android сильно вредит, и прокрутка удивительно неприятна на всех мобильных устройствах

Ещё вопросы

Сообщество Overcoder
Наверх
Меню