Медленные события Javascript touch на 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 });
});
9
android javascript mobile touch

2 ответов

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

Николай С. Zakas дает вам некоторые советы по избежанию перекомпоновке. 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 год ...

БОЛЬШИНСТВО ANDROID УСТРОЙСТВ ПО-ПРЕЖНЕМУ МЕДЛЕННО: - (

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

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

8

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

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

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

3