个人中心
gpt4 book ai didi

javascript - Android 上缓慢的 Javascript 触摸事件

转载 作者：塔克拉玛干 更新时间：2023-11-02 08:03:45 25 4
gpt4 key购买 nike

我正在尝试编写一个简单的基于 html 的绘图应用程序(下面附有独立的简化代码)。我已经在以下设备上对此进行了测试:

  • iPad 1 和 2:效果很好
  • 运行 Windows 的 ASUS T101:运行良好
  • Samsung Galaxy Tab:极其缓慢且时断时续 -- 无法使用。
  • Lenovo IdeaPad K1:极其缓慢且时断时续 -- 无法使用。
  • Asus Transformer Prime:与 iPad 相比明显滞后 -- 接近可用。

华硕平板电脑运行的是 ICS，其他安卓平板电脑运行的是 3.1 和 3.2。我使用普通的 Android 浏览器进行了测试。我还尝试了 Android Chrome Beta，但情况更糟。

这是演示该问题的视频:http://www.youtube.com/watch?v=Wlh94FBNVEQ

我的问题是为什么 Android 平板电脑这么慢？我做错了什么，还是 Android 操作系统或浏览器的继承问题，或者我可以在我的代码中做些什么？

多.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>

多.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 });
});

最佳答案

看看你的代码，你应该做一些优化。马上，永远不要使用 jQuery 的 $.each() 来做循环。此外，每次轮询某物的左侧、顶部、宽度或高度时，都会导致浏览器停止其正在执行的操作，重新绘制整个屏幕，并为您获取最准确的值。而是将这些值存储在 javascript 变量中。使用 google chrome 的时间线功能来查找和消除不必要的油漆和回流。以下是一些有用的链接:

Nicholas C. Zakas 为您提供一些避免回流的技巧。 http://oreilly.com/server-administration/excerpts/even-faster-websites/writing-efficient-javascript.html

这是 Zakas 向 Google 程序员做的演讲: http://www.youtube.com/watch?v=mHtdZgou0qU

Paul Irish 在你眼前加速一个缓慢的 JavaScript: http://www.youtube.com/watch?v=Vp524yo0p44请注意，在制作该视频时，时间轴是 Chrome 中的一项测试版功能。它现在是 Chrome 20 中的标准配置。如果您没有看到它，请更新您的 Chrome。

不幸的是......即使有所有这些优化......截至 2012 年......

大多数安卓设备仍然很慢:-(

触摸事件不会像在 Apple 设备中那样快速触发，因为 Apple 设备的硬件要比大多数运行 Android 操作系统的设备好。市面上有速度很快的 Android 平板电脑和手机，但它们的价格通常与 Apple 设备一样多——可能是因为它们具有相似的硬件规范。 Apple 设备除了主 CPU 外，还有特殊的 float 学芯片和图形芯片。许多 Android 设备不包含这些额外的芯片，而是具有虚拟 float 学芯片。

要适应较慢的 Android 设备，您唯一可以做的就是检测它们并优雅地降低用户体验。例如，我创建了一个可拖动的产品轮播。对于 Android，我取消了拖动选项并添加了可点击的滚动箭头，这些箭头一次将旋转木马向左或向右移动一组固定的像素。

关于javascript - Android 上缓慢的 Javascript 触摸事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9929434/

25 4 0
文章推荐： javascript - Android 浏览器中某些键没有按键事件
文章推荐： Java Streams 按最小值/最大值过滤嵌套集合
文章推荐： java - 使用 Java 而非 FCM 控制台发送 Firebase 通知
文章推荐： android - Phonegap Android 应用程序重新启动而不是恢复，尽管它没有被操作系统杀死
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com