移動端點擊事件延遲的誕生消亡史

来源:https://www.cnblogs.com/jofun/archive/2020/07/23/13369552.html
-Advertisement-
Play Games

快速反饋對於任何 UI 的實現都是至關重要的。研究表明,100ms 是界面讓用戶感到即時的最大延遲。儘管如此,移動網路仍然受到一個巨大的反饋問題的困擾:觸摸任何元素後,延遲 300 毫秒。這種延遲是許多用戶認為基於 HTML 的 Web 應用程式“卡頓”的最重要原因之一。在本文中,本文將帶你瞭解移動... ...


快速反饋對於任何 UI 的實現都是至關重要的。研究表明,100ms 是界面讓用戶感到即時的最大延遲。儘管如此,移動網路仍然受到一個巨大的反饋問題的困擾:觸摸任何元素後,延遲 300 毫秒。這種延遲是許多用戶認為基於 HTML 的 Web 應用程式“卡頓”的最重要原因之一。在本文中,本文將帶你瞭解移動端點擊事件延遲的從誕生到消亡的過程。

誕生史

在 2007 年,蘋果公司發佈首款 iPhone 之前,由於當時的網站普遍為大屏幕設備所設計,為了應對 iPhone 這種小屏幕設備瀏覽桌面網站的問題,由此,蘋果引入了多項變革,其中就包含了“雙擊縮放準確定位正文主體,並將其縮放至適合的比例展現”的功能,即雙擊縮放功能。然而,由於這種雙擊縮放的操作,在用戶第一次單擊頁面元素時,瀏覽器並不知道用戶是想做雙擊縮放操作還是普通的單擊操作。因此,IOS Safari 瀏覽器首先引入了 300 毫秒延遲,用來判斷用戶是否會再次點擊,也就是說,在第一次點擊延遲 300 毫秒,300 毫秒後用戶沒有再次點擊則認定為用戶在進行普通的單擊操作,並觸發單擊(Click)事件。

全面的移動開發者與單擊事件延遲戰爭拉開了序幕。鑒於 iPhone 的巨大成功,其他瀏覽器廠商也都快步跟進紛紛效仿了 iPhone Safari 瀏覽器的做法。於是,單擊事件延遲成為了移動開發者不得不面對的痛。

消亡史

雖然從當時來看 300ms 延遲並沒有什麼不妥,然而在越來越註重用戶體驗的移動互聯網時代,這種延遲是無法被用戶所接受的,加之開發者也可以對網站進行響應式適配,雙擊縮放的操作變成了一種可有可無的操作,瀏覽器廠商開始意識到延遲所帶來的體驗問題,提出了一些解決方案。

禁用縮放

解決此問題的第一個方法是常識性方法。由於延遲產生的原因是雙擊縮放操作,那麼就禁用頁面縮放功能,最直接的方法就是設置 Viewport 禁止縮放,代碼如下:

<meta name="viewport" content="user-scalable=no">
<!-- 或者 -->
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

適用於 Android 的 Chrome 瀏覽器是第一個引入此更改的應用程式,隨後緊接著是 Android 的 Firefox。沒有其他瀏覽器供應商宣佈要添加此優化的計劃。儘管此解決方案非常巧妙,背後卻以犧牲整個頁面縮放為代價,帶來的影響是對於頁面上的圖像或小文本,想要進行縮放變得難以完成。即大多數網站都無法從 Android 版 Chrome 和 Android 版 Firefox 的優化中受益。

幸運的是,隨後 Chrome 團隊在 Chrome 32 之後的版本中,提出了新的優秀方案,代碼如下:

<meta name="viewport" content="width=device-width">

約定當 Viewport 的 width 小於或等於 device-width 時,去除雙擊縮放功能。這項技術的另一個關鍵在於,它僅消除了雙擊縮放的功能,用戶依然可以使用雙指縮放功能。因此,不存在與禁用縮放相關的可用性和可訪問性問題。

指針事件

指針事件是 Microsoft 提出的一系列針對 Web 的新事件,現已成為 W3C 規範。指針事件規範是嘗試使用單個事件模型統一我們對所有輸入類型(滑鼠,觸摸,手寫筆等)的處理。根據規範,CSS 屬性 touch-action 用於設置觸摸屏用戶如何操縱元素的區域(例如,瀏覽器內置的縮放功能)。touch-action 預設值是 auto,當設置為 none 時會禁止用戶縮放,能成功解決 300ms 延遲的問題,如:

a[href],
button {
  touch-action: none;
}

甚至可以添加 touch-action: none 到 body 以完全禁用雙擊來縮放(註意:這也將禁用雙指縮放功能,因此它與我們前面討論的與禁用縮放相關的可訪問性和可用性問題相同)。

2014年3月13日,W3C 規範增添了新的 touch-action 屬性值 manipulation。該屬性值提供了兩全其美的體驗;它允許雙指縮放,以避免 touch-action: none 出現的可訪問性和可用性問題,但它仍然可以通過禁用雙擊縮放來消除 300ms 的延遲。

FastClick

FastClick 是一個小型 JavaScript 庫,專門旨在防止移動瀏覽器中的 300ms 點擊延遲。FastClick 的實現基礎建立於 touchstart ,touchmove 或者 touchend 事件中的任意一個調用 event.preventDefault,mouse 事件 以及 click 事件將不會觸發。FastClick 的原理在 touchend 階段調用 event.preventDefault,然後通過 document.createEvent 創建一個自定義事件 MouseEvents,然後通過 event​Target​.dispatch​Event 觸發對應目標元素上綁定的 click 事件。

關於 FastClick 的好處是,它非常容易使用,只需在文檔載入後調用 FastClick.attach() 在 body 元素上實例化:

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

FastClick足夠聰明,可以檢測到如果是桌面瀏覽器或者存在 meta 標記和 touch-action 解決方案的時候,不會執行任何操作。因此,在我們為所有平臺提供真正的解決方案之前,這是一個極好的解決方法。

現代瀏覽器

得益於現代瀏覽器對 W3C 規範 touch-action: manipulation 的支持性,才真正徹底解決了點擊事件延遲的問題。touch-action: manipulation 規定瀏覽器只允許進行滾動和持續縮放操作。任何其它被 touch-action: auto 支持的行為不被支持。啟用平移和雙指縮放手勢,但禁用其他非標準手勢,例如雙擊縮放。 禁用雙擊縮放功能可減少瀏覽器在用戶點擊屏幕時延遲生成點擊事件的需要。代碼如下:

html {
  touch-action: manipulation;
}

從此,移動端點擊事件延遲正式宣告消亡。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 開始之前明確一下死鎖和鎖等待這兩個事件的異同相同的之處:兩者都是當前事物在試圖請求被其他事物已經占用的鎖,從而造成當前事物無法執行的現象不同的之處:死鎖是相關session雙方或者多方中必然要犧牲(回滾)至少一個事務,否則雙方(或者多方)都無法執行;鎖等待則不然,對於暫時無法申請到的鎖,嘗試持續地“ ...
  • MHA(Master HA)是一款開源的 MySQL 的高可用程式,它為 MySQL 主從複製架構提供了 automating master failover 功能。MHA 在監控到 master 節點故障時,會提升其中擁有最新數據的 slave 節點成為新的master 節點,在此期間,MHA 會 ...
  • 原文地址:https://www.citusdata.com/blog/2019/02/08/the-most-useful-postgres-extension-pg-stat-statements/Postgresql的Extensions能夠延伸,更改和推進Postgres的行為。怎麼樣?通過 ...
  • 一、隱士intent,緊接著上一次複習 得到第二個活動返回的數據之後,我們需要重寫onActivityResult()來獲取數據 protected void onActivityResult(int requestCode,int resultCode,Intent data){ switch(r ...
  • 請輸入有效的11位數字手機號碼,或者包含區號的11位或12位數字座機號碼 出現這個問題按照提示上的來看應該是手機號碼輸入的不對 但是輸入的手機號碼的確是11位 這個手機號是開發者賬號綁定的手機號 也就是這個開發者賬號的蘋果ID綁定的電子郵箱和綁定的手機號碼 解決方案就是在手機上登錄上開發者的那個賬號 ...
  • 首先刪除 SceneDelegate.h 和 SceneDelegate.m ,info.plist中的 Application Scene Manifest 和 AppDelegate.m 中的 #pragma mark - UISceneSession lifecycle - (UISceneC ...
  • 功能點: 1.更新彈窗UI 2.強更與非強更且別控制 3.屏蔽物理返回鍵(因為強更的時候點擊返回鍵,彈窗會消失) 4.點擊彈窗外透明區域時,彈窗不消失 ...
  • 1.盒子模型主要定義四個區域:內容(content)、內邊距(padding)、邊框(border)、外邊距(margin) 2.border,設置元素的邊框,屬性(邊框三要素):寬度、樣式、顏色,這也是通常border屬性值的書寫順序(非嚴格要求) 單獨書寫:border-width(寬度,預設3 ...
一周排行
    -Advertisement-
    Play Games
  • 記錄一篇.netwebapi開發過程 首先使用6+dapper+sqlserver 我們創建一個空項目使用HttpReports來監控api HttpReports 基於.Net Core 開發的APM監控系統,使用MIT開源協議,主要功能包括,統計, 分析, 可視化, 監控,追蹤等,適合在微服務環 ...
  • 本文技術源自外企,並已在多個世界500強大型項目開發中運用。 本文適合有初/中級.NET知識的同學閱讀。(支持.NET/.NET Framework/.NET Core) RabbitMQ作為一款主流的消息隊列工具早已廣受歡迎。相比於其它的MQ工具,RabbitMQ支持的語言更多、功能更完善。 本文 ...
  • ApeForms系列① 快速上手 @ 前言 ApeForms是一套基於WinForm框架免費的UI庫,提供了豐富的Metro風格控制項、針對WinForm開發中常見類型的擴展、通用Dialog/Notification的模板等。 目前ApeForms仍在持續開發擴充更多的控制項,如果有好的建議可以在評論 ...
  • C#-WinForm窗體仿Android桌面(左右翻頁) 利用ApeForms擴展方法使控制項平滑運動,並以此實現一個仿Android桌面翻頁的效果。 ...
  • 本文大部分來自官方教程的Google翻譯 但是加了一點點個人的理解和其他相關知識 轉載請註明 原文鏈接 :https://www.cnblogs.com/Multya/p/16317401.html 官方教程: https://www.sfml-dev.org/tutorials/2.5/ 播放聲音 ...
  • 背景 項目裡面的yml文件為了區別線上、測試、本地環境,分別有application-prod.yml,application-dev.yml,application-local.yml;但是每個裡面有很多相同的配置,希望配置文件裡面的運維相關的公共配置抽取出來,統一管理 實現方案 通過在appli ...
  • 最近 JetBrains 為旗下系列 IDE 發佈了全新的預設 UI: IDEA 官宣全新預設 UI,太震撼了!! 不過現在還是預覽版,需要通過以下鏈接參與試用: https://www.jetbrains.com/lp/intellij-new-ui-preview/ 棧長昨天也提交了試用申請,還 ...
  • 在IDEA中將Javafx項目打包成為可運行的.jar文件。 使用JDK17.0.2。 ...
  • 在Spring項目中進行簡單的cglib動態代理的學習測試,主要代碼如下: 一個目標類HaveDinnerService public class HaveDinnerService { public String eat(String food) { System.out.println("開始吃 ...
  • 記錄一下使用springSecurity搭建用戶認證和授權的代碼、、、 技術棧使用springSecurity + redis + JWT + mybatisPlus 部分代碼來自:https://blog.csdn.net/I_am_Hutengfei/article/details/100561 ...