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

我正在使用hammer.js在宠物项目上实现一些触摸屏function。

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

这是相关的JQuery / JS代码：

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

$(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文档

Answer 1

这是生涩的，因为你在每个事件处理程序中都有很多计算方法。

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

计算后也一样。 不要一直称之为a[0] + a[7] ，计算一次，多次应用。

然后，将您的.css()调用仅在一个具有多个属性的调用中组合。

这会有所帮助，但为了获得丝般顺滑的东西，请继续阅读：

---

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

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

然后，尝试尽可能多地使用css3转换（我不是指使用CSS样式表，我的意思是使用JavaScript的css3属性）。 这些属性执行得更好。 同时，尝试删除大多数昂贵的CSS样式并进行大量测试，因为有些样本具有较高的渲染时间成本（如drop-shadow等）。

然后，检查并阅读大多数关于60 fps费率的Google开发团队演示文稿，以及有关使您的网站免费获取的任何信息。 他们经常提供基本概念，帮助您更好地了解正在发生的事情，以及在何处/如何优化和跟踪您网站的效果。