Hammer.js 在 pinchin/pinchout 上很慢而且很生涩

Question

我正在使用hammer.js 在一个宠物项目中实现一些触摸屏功能。

所需的产品是可以通过触摸屏拖动和放大和缩小的地图。我让它工作了，一切都很好，除了捏/捏机制非常非常慢。从夹点发生到事件触发之间有一个非常明显的延迟。

以下是相关的 JQuery/JS 代码：

编辑：根据 Simon 的建议，代码现在更好（更快）了。这是完成的版本

$(document).ready(function(){
  //Function which simulates zoom on the map on pinchin/pinchout
  $('#map').hammer()
    .on("pinchin", function(e) {
      var scale = $(this).css('transform');
      scale = (scale == null ? $(this).css('-webkit-transform') : scale); 
      scale = (scale == null ? $(this).css('-ms-transform') : scale);
      scale = scale.split(" ");
      scale = parseFloat(scale[0].substring(7, scale[0].length - 1));

      if(scale > 1) {
        scale = ('scale(' + (scale - .1).toString() + ')');
        $(this).css({'transform':scale, '-ms-transform':scale, '-webkit-transform':scale });
      }
    })
    .on("pinchout", function(e) {
      var scale = $(this).css('transform');
      scale = (scale == null ? $(this).css('-webkit-transform') : scale); 
      scale = (scale == null ? $(this).css('-ms-transform') : scale);
      scale = scale.split(" ");
      scale = parseFloat(scale[0].substring(7, scale[0].length - 1));

      if(scale < 5) {
        scale = ('scale(' + (scale + .1).toString() + ')');
        $(this).css({'transform':scale, '-ms-transform':scale, '-webkit-transform':scale
      }
  });
});

hammer.js documentation

Answer 1

这很生涩，因为您在每个事件处理程序中都要进行大量计算。

首先，缓存您的变量。调用$('#map') 总是进入DOM，获取对象并返回它。只做一次，缓存结果。

在您的计算之后也是如此。不要一直调用这个a[0] + a[7]，计算一次，多次应用。

然后，好吧，将您的 .css() 调用合并到一个具有多个属性的调用中。

这会有所帮助，但要获得丝般顺滑的效果，请继续阅读：

---

拥有流畅的动画并不难，但您需要了解在哪里改进以及如何限制布局成本、回流和重新布局。我不能在这里解释这一切，但我可​​以给你一些概念来研究：

首先，在触发任何 css 更改之前使用requestAnimationFrame。这将确保 css 修改发生在动画帧的开头，而不是结尾 - 因此它有助于降低跳过帧的风险。

然后，尝试尽可能多地使用 css3 转换（我不是说使用 CSS 样式表，我是指在 JavaScript 中使用 css3 属性）。这些属性表现得更好。同时，尝试移除大部分昂贵的 CSS 样式并进行大量测试，因为有些样式的渲染时间成本很高（如投影等）。

然后，查看并阅读大多数关于尊重 60 fps 速率的 Google 开发团队演示文稿，以及有关让您的网站免于卡顿的任何内容。他们通常会介绍一些基本概念，这些概念可以帮助您更好地了解正在发生的事情，以及在哪里/如何优化和跟踪您的网站的性能。