移動端300ms點擊延遲問題

前言

最近在作一個移動端的react項目，驗收時被提到一個優化問題，就是列表的active狀態切換太慢了，並且在安卓和PC上都是沒延遲的，就ios上有，大概就是這樣一個常見的列表：

針對這個現象我搜索了一下無果在咱們前端討論羣了說了一下，有兩個小夥伴都甩給了我同一個解決方案：引入react-fastclick：

import initReactFastclick from 'react-fastclick';
initReactFastclick();
複製代碼

像這樣安裝模塊引入以後ios上的點擊延遲就真的消失了誒，但是爲何呢？懷着好奇的心查了一堆資料得知原來我這個就是傳說中的點擊事件300ms延遲形成的。 （雖然以後聽過，但沒遇到過，也沒處理過，哈哈）。

移動端點擊事件爲何會有300ms延遲

簡單來講，就是早期蘋果爲了判斷移動端上的雙擊縮放事件而加的，在touchend和click事件之間加300ms的延遲來判斷用戶究竟是點擊仍是雙擊。

谷歌開發者文檔原文是這樣說的：

For many years, mobile browsers applied a 300-350ms delay between touchend and click while they waited to see if this was going to be a double-tap or not, since double-tap was a gesture to zoom into text.

怎麼解決300ms延遲呢

• fastclick

  就是我文章開頭提到的我司小夥伴給我提供的方案，也算是一種比較簡單粗暴的方案。fastclick是專門爲解決移動端瀏覽器300毫秒點擊延遲問題所開發的一個輕量級的庫。fastclick的原理是在檢測到touchend事件的時候，會經過DOM自定義事件當即觸發模擬一個click事件，並把瀏覽器在300ms以後的click事件阻止調。

• 禁用縮放 經過下面的hack技巧，不添加fastclick也能修復延遲的問題

  • 適用場景：
    • Chrome on Android (all versions)
    • iOS 9.3
  • 處理代碼

  <meta name="viewport" content="user-scalable=no" />
  複製代碼

  這種方案通過實測，在高版本安卓上市沒問題的，但在ios上就要看webview了，若是使用的是UIWebView那也仍是會有延遲的，若是用的WKWebView就沒有延遲了。關於ios的WKWebView想了解更多的你們能夠自行搜索，總之就是性能會比UIWebView好的一個新的webview，在iOS 8 上提出的，ios的微信端目前已經採用了WKWebView。

使用fastclick的坑

由於我第一次使用這個庫，因此還沒具體遇到過，但從這篇文章描述的狀況來看大致能猜到一些什麼樣的場景容易掉坑裏，那就是頁面比較複雜，不單單是有點擊事件的事件，原理上面講了。

總結

我在本身項目中最終選擇的解決方案就是禁用縮放，由於咱們ios客戶端最近正好更新了WKWebView，哈哈哈。這樣能夠避免一些不可預料的坑，也能少引入一些代碼。在安卓上只要咱們把縮放禁用就不會出現延遲了。

若是是在UIWebView的場景的狀況下，大機率仍是會出現300ms延遲的，這個時候若是頁面不是太複雜，也是能夠引入fastclick的。

參考

• 移動端300ms點擊延遲和點擊穿透
• 關於fastclick.js引起的慘案
• 2019 再聊移動端 300ms 延遲及 fastClick 原理解析