мой первый раз задавая вопрос здесь, этот сайт очень полезен, я просто не мог найти ответ на свою проблему.
Пожалуйста, несите меня, я полностью объясню, прежде чем представить свой вопрос :)
Я работаю над игрой 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 не играет хорошо?
спасибо
Я чувствую твою боль. Так как большая часть этого в значительной степени черная магия в этот момент, лучшее, что я могу сделать, это связать аналогичный опыт и предложить предложения:
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 сильно вредит, и прокрутка удивительно неприятна на всех мобильных устройствах