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模式載入等優點。

WEB 移動端 300ms 延遲