WEB 移动端 300ms 延迟

移动端300毫秒延迟是怎么来的呢,又怎么解决呢？

完整版：http://www.linovo.me/front/webapp-300ms.html

简洁版：http://www.xiaomeiti.com/note/3585

一言以蔽之，就是本来只能手机提供了一个双击放大/再双击缩小的功能，然后怎么判断双击呢？那就是点了第一下，然后等300ms，在这300ms内如果又有点击，就是双击，否则该干嘛干嘛。但是这样引发的一个问题是如果一个链接，在用户点击了一次的情况下，要等300ms再跳转，用户就会觉得这页面很卡（实际上延迟100ms用户就能明显感受到。所以我们要解决这个问题。

一、禁止缩放

问题的来源就是页面缩放问题，所以解决方法里就有这个。禁用缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>

一般进行移动开发的时候都会加上这种标签，直接就禁止掉了页面缩放，万事大吉！

二、设置 viewport 的 device-width （chrome 32+）

在 chrome 32+ 中，如果设置了 viewport 的宽度小于或等于物理设备的宽度，那么也会达到禁用缩放的效果。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3">

注意：跟上面不一样

三、利用指针事件（IE10+）

指针事件很多，解决这个问题用这个：

selector {
    -ms-touch-action: manipulation; /* IE10  */
    touch-action: manipulation;     /* IE11+ */
}

四、tappy.js

https://github.com/filamentgroup/tappy/

存在点透（上面元素的点击事件会被下面的元素接收到，也可以解决）等问题。

很小，只有1kb左右，需要jquery或者能提供类似借口的框架。

$( "a.my-link" ).bind( "tap", function( e ){ 
  alert( "tap!" );
}); 

五、fastclick.js

https://github.com/ftlabs/fastclick

很流行，很好用。

原声使用：

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

有jQuery库

$(function() {
    FastClick.attach(document.body);
});

有支持AMD模式加载等优点。