Медленные события касания Javascript на Android

Я пытаюсь написать простое приложение для рисования на основе html (прилагаемый ниже упрощенный упрощенный код). Я тестировал это на следующих устройствах:

  • IPad 1 и 2 : отлично работает
  • ASUS T101 работает под управлением Windows : отлично работает
  • Samsung Galaxy Tab : чрезвычайно медленный и неоднородный – непригодный для использования.
  • Lenovo IdeaPad K1 : Чрезвычайно медленный и неоднородный – непригодный для использования.
  • Asus Transformer Prime : заметное отставание в сравнении с iPad – близко к использованию.

На планшете Asus работает ICS, другие Android-планшеты работают с версиями 3.1 и 3.2. Я тестировал использование Android-браузера. Я также попробовал бета-версию Android Chrome, но это было еще хуже.

Вот видео, которое демонстрирует проблему: http://www.youtube.com/watch?v=Wlh94FBNVEQ

Мои вопросы почему таблетки Android так медленно? Я что-то делаю неправильно или это проблема наследования с ОС Android или браузером, или я могу что-то сделать с этим в своем коде?

multi.html:

<html> <body> <style media="screen"> canvas { border: 1px solid #CCC; } </style> <canvas style="" id="draw" height="450" width="922"></canvas> <script class="jsbin" src="jquery.js"></script> <script src="multi.js"></script> </body> </html> 

multi.js:

 var CanvasDrawr = function(options) { // grab canvas element var canvas = document.getElementById(options.id), ctxt = canvas.getContext("2d"); canvas.style.width = '100%' canvas.width = canvas.offsetWidth; canvas.style.width = ''; // set props from options, but the defaults are for the cool kids ctxt.lineWidth = options.size || Math.ceil(Math.random() * 35); ctxt.lineCap = options.lineCap || "round"; ctxt.pX = undefined; ctxt.pY = undefined; var lines = [,,]; var offset = $(canvas).offset(); var eventCount = 0; var self = { // Bind click events init: function() { // Set pX and pY from first click canvas.addEventListener('touchstart', self.preDraw, false); canvas.addEventListener('touchmove', self.draw, false); }, preDraw: function(event) { $.each(event.touches, function(i, touch) { var id = touch.identifier; lines[id] = { x : this.pageX - offset.left, y : this.pageY - offset.top, color : 'black' }; }); event.preventDefault(); }, draw: function(event) { var e = event, hmm = {}; eventCount += 1; $.each(event.touches, function(i, touch) { var id = touch.identifier, moveX = this.pageX - offset.left - lines[id].x, moveY = this.pageY - offset.top - lines[id].y; var ret = self.move(id, moveX, moveY); lines[id].x = ret.x; lines[id].y = ret.y; }); event.preventDefault(); }, move: function(i, changeX, changeY) { ctxt.strokeStyle = lines[i].color; ctxt.beginPath(); ctxt.moveTo(lines[i].x, lines[i].y); ctxt.lineTo(lines[i].x + changeX, lines[i].y + changeY); ctxt.stroke(); ctxt.closePath(); return { x: lines[i].x + changeX, y: lines[i].y + changeY }; }, }; return self.init(); }; $(function(){ var drawr = new CanvasDrawr({ id: "draw", size: 5 }); }); 

Solutions Collecting From Web of "Медленные события касания Javascript на Android"

Посмотрев на свой код, вы должны сделать некоторую оптимизацию. С самого начала, никогда не используйте jQuery $ .each () для выполнения циклов. Кроме того, каждый раз, когда вы просматриваете левую, верхнюю, ширину или высоту чего-то, вы заставляете браузер останавливать то, что он делает, перерисовывать весь экран и получать самые точные значения. Вместо этого сохраните эти значения в переменных javascript. Используйте функцию хронологии Google Chrome для поиска и устранения ненужных красок и переплавов. Вот несколько полезных ссылок:

Николай К. Закас дает вам несколько советов по предотвращению переплавов. http://oreilly.com/server-administration/excerpts/even-faster-websites/writing-efficient-javascript.html

Вот Закас, дающий свою презентацию программистам Google: http://www.youtube.com/watch?v=mHtdZgou0qU

Paul Irish Ускоряет медленный JavaScript перед вашими глазами: http://www.youtube.com/watch?v=Vp524yo0p44 Обратите внимание, что во время этого видео график был бета-функцией в Chrome. Теперь он стандартен в Chrome 20. Если вы его не видите, обновите Chrome.

К сожалению … Даже со всеми этими оптимизациями … с 2012 года …

MOST ANDROID DEVICES STILL SLOW 🙁

События прикосновения не срабатывают так же быстро, как в устройствах Apple, потому что у устройств Apple есть лучшее оборудование, чем у большинства устройств под управлением ОС Android. Бывают быстрые планшеты и телефоны для Android, но они обычно стоят столько же, сколько устройства Apple – вероятно, потому, что у них аналогичные аппаратные спецификации. У устройств Apple есть специальные математические чипы с плавающей запятой и графические чипы в дополнение к основному процессору. Многие устройства Android не содержат эти дополнительные чипы, вместо этого у них есть виртуальные математические чипы с плавающей запятой.

Единственное, что вы можете сделать, чтобы разместить медленные Android-устройства, – это обнаружить их и грациозно ухудшить работу пользователей. Например, я создал карусель с перетаскиваемым продуктом. Для андроидов я исключаю опцию перетаскивания и добавляю стрелки стрелок, которые можно передвигать по карусели влево или вправо с фиксированным набором пикселей за раз.

Единственный способ узнать, где и почему ваш код неэффективен, – это профилировать его.

Chrome Mobile позволяет подключаться к инспектору WebKit со своего рабочего стола , предоставляя вам доступ к фантастическим средствам отладки, которые вы использовали в инструментах разработчика Chrome.

Как только вы подключитесь к Chrome Mobile, просмотрите свой скрипт и посмотрите, какие функции пережевывают процессорное время. Затем вы сможете начать выяснять, как оптимизировать эти функции.