移動端300ms延遲原因
2007 年初欧聘。蘋果公司在發(fā)布首款 iPhone 前夕强衡，遇到一個問題：當(dāng)時的網(wǎng)站都是為大屏幕設(shè)備所設(shè)計的竖幔。于是蘋果的工程師們做了一些約定，應(yīng)對 iPhone 這種小屏幕瀏覽桌面端站點(diǎn)的問題砸脊。
雙擊縮放(double tap to zoom)具篇，這也是會有上述 300 毫秒延遲的主要原因。雙擊縮放脓规，即用手指在屏幕上快速點(diǎn)擊兩次栽连，iOS 自帶的 Safari 瀏覽器會將網(wǎng)頁縮放至原始比例险领。
假定這么一個場景侨舆。用戶在 iOS Safari 里邊點(diǎn)擊了一個鏈接。由于用戶可以進(jìn)行雙擊縮放或者單擊跳轉(zhuǎn)的操作绢陌，當(dāng)用戶一次點(diǎn)擊屏幕之后挨下，瀏覽器并不能立刻判斷用戶是確實(shí)要打開這個鏈接，還是想要進(jìn)行雙擊操作脐湾。因此臭笆，iOS Safari 就等待 300 毫秒，以判斷用戶是否再次點(diǎn)擊了屏幕。
鑒于iPhone的成功愁铺，其他移動瀏覽器都復(fù)制了 iPhone Safari 瀏覽器的多數(shù)約定鹰霍，包括雙擊縮放，幾乎現(xiàn)在所有的移動端瀏覽器都有這個功能茵乱。
解決方案
1. faskclick https://github.com/ftlabs/fastclick
- 原理: 在檢測到touchend事件的時候茂洒，會通過DOM自定義事件立即出發(fā)模擬一個click事件，并把瀏覽器在300ms之后真正的click事件阻止掉
- 缺點(diǎn): 腳本相對較大, 不建議使用
2. 禁用游覽器縮放
當(dāng)HTML文檔頭部包含如下meta標(biāo)簽時：
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
表明這個頁面是不可縮放的瓶竭，那雙擊縮放的功能就沒有意義了督勺，此時瀏覽器可以禁用默認(rèn)的雙擊縮放行為并且去掉300ms的點(diǎn)擊延遲。
這個方案有一個缺點(diǎn)斤贰，就是必須通過完全禁用縮放來達(dá)到去掉點(diǎn)擊延遲的目的智哀，然而完全禁用縮放并不是我們的初衷，我們只是想禁掉默認(rèn)的雙擊縮放行為荧恍，這樣就不用等待300ms來判斷當(dāng)前操作是否是雙擊瓷叫。但是通常情況下，我們還是希望頁面能通過雙指縮放來進(jìn)行縮放操作送巡，比如放大一張圖片赞辩，放大一段很小的文字。
3. 更改默認(rèn)的視口寬度
<meta name="viewport" content="width=device-width">
一開始授艰，因?yàn)殡p擊縮放主要是用來改善桌面站點(diǎn)在移動端瀏覽體驗(yàn)的辨嗽。 隨著發(fā)展現(xiàn)在都是專門為移動開發(fā)專門的站點(diǎn)，這個時候就不需要雙擊縮放了淮腾，所以移動端瀏覽器就可以自動禁掉默認(rèn)的雙擊縮放行為并且去掉300ms的點(diǎn)擊延遲糟需。如果設(shè)置了上述meta標(biāo)簽，那瀏覽器就可以認(rèn)為該網(wǎng)站已經(jīng)對移動端做過了適配和優(yōu)化谷朝，就無需雙擊縮放操作了洲押。
這個方案相比方案一的好處在于，它沒有完全禁用縮放圆凰，而只是禁用了瀏覽器默認(rèn)的雙擊縮放行為杈帐，但用戶仍然可以通過雙指縮放操作來縮放頁面。
4.通過 touchstart 和 touchend模擬實(shí)現(xiàn)
能不能直接用touchstart代替click呢专钉，
答案是不能挑童，使用touchstart去代替click事件有兩個不好的地方。
第一：touchstart是手指觸摸屏幕就觸發(fā)跃须，有時候用戶只是想滑動屏幕站叼，卻觸發(fā)了touchstart事件，這不是我們想要的結(jié)果菇民；
第二：使用touchstart事件在某些場景下可能會出現(xiàn)點(diǎn)擊穿透的現(xiàn)象尽楔。
什么是點(diǎn)擊穿透投储？
假如頁面上有兩個元素A和B。B元素在A元素之上阔馋。我們在B元素的touchstart事件上注冊了一個回調(diào)函數(shù)玛荞，該回調(diào)函數(shù)的作用是隱藏B元素。我們發(fā)現(xiàn)呕寝，當(dāng)我們點(diǎn)擊B元素冲泥，B元素被隱藏了，隨后壁涎，A元素觸發(fā)了click事件凡恍。
這是因?yàn)樵谝苿佣藶g覽器，事件執(zhí)行的順序是touchstart > touchend > click怔球。而click事件有300ms的延遲嚼酝，當(dāng)touchstart事件把B元素隱藏之后，隔了300ms竟坛，瀏覽器觸發(fā)了click事件闽巩，但是此時B元素不見了，所以該事件被派發(fā)到了A元素身上担汤。如果A元素是一個鏈接涎跨，那此時頁面就會意外地跳轉(zhuǎn)。
