cordova - 消除phonegap应用程序的300ms延迟

Question

我一直在尝试使我的应用程序响应速度更快，但不幸的是，似乎没有任何帮助。
我正在使用PhoneGap，因此遇到了著名的300ms触摸事件延迟。

这使应用程序感觉非常迟钝和缓慢，这不是一个选择。

我看到诸如Fastclick.js之类的某些库为jQuery mobile用户解决了此问题，但我没有使用jQuery mobile。我正在使用HTML，CSS，JavaScript和jQuery开发我的应用程序。

我确实需要找到一种方法来消除触摸点击带来的300ms延迟。
期待得到我的任何帮助。

谢谢。

Answer 1

Christophe Coenraets在他的Top 10 Performance Techniques for PhoneGap Applications中解决了这个问题。它是＃6，视频可在Adobe TV上观看（第31分钟）。

基本上，300ms延迟不是错误或性能问题，它是检测可能的双击的必要功能。

消除延迟的解决方案是使用touch events而不是click事件的组合，例如：

var trackingClick = false;
var targetElement = null;
var touchStartX = 0;
var touchStartY = 0;
var touchBoundary = 10;

target.addEventListener('touchstart', function(event) {

    trackingClick = true;
    targetElement = event.target;
    touchStartX = event.targetTouches[0].pageX;
    touchStartY = event.targetTouches[0].pageY;

    return true;
});

target.addEventListener('touchend', function(event) {

    trackingClick = false;

    //handle click event
    ...

    return false;
});

target.addEventListener('touchmove', function(event) {
    if (!trackingClick) {
        return true;
    }

    // If the touch has moved, cancel the click tracking
    if (targetElement !== event.target 
        || (Math.abs(event.changedTouches[0].pageX - touchStartX) > touchBoundary 
        || (Math.abs(event.changedTouches[0].pageY - touchStartY) > touchBoundary)) {
        trackingClick = false;
        targetElement = null;
    }

    return true;
});

target.addEventListener('touchcancel', function() {
    trackingClick = false;
    targetElement = null;
});

但这基本上就是FastClick的工作（实际上，上面的片段只是从fastclick source code中摘录的一个非常基本的示例）。还有许多其他情况需要处理，因此，如果您不想实现自己的库，则应该仔细研究FastClick。实际上，它不仅适用于jQuery移动用户，甚至不需要jQuery，它只是一个独立的小型资源库。

jQuery移动用户注意：可以使用FastClick，但是您应该了解内置的类似功能：vclick

tl; dr：如果您没有jQuery Mobile，请使用FastClick