移動(dòng)端Web界面滾動(dòng)性能優(yōu)化 Passive event listeners

mui頁(yè)面，js點(diǎn)擊事件嵌套ajax，提示：Unable to preventDefault inside passive

問(wèn)題描述：

用MUI例子中的選項(xiàng)卡，底部的導(dǎo)航只能實(shí)現(xiàn)div切換，鏈接無(wú)法跳轉(zhuǎn)。

查看控制臺(tái)，輸出：Unable to preventDefault inside passive event listener due to target 的警告。

技術(shù)分享

問(wèn)題解決：

經(jīng)檢查相關(guān)資料，加入以下代碼，即可解決問(wèn)題。

mui(‘body‘).on(‘tap‘,‘a(chǎn)‘,function(){document.location.href=this.href;});

問(wèn)題原因：

MUI在選項(xiàng)卡中的文字中已說(shuō)明：

通過(guò)DIV模擬一個(gè)獨(dú)立頁(yè)面，通過(guò)DIV的顯示、隱藏模擬不同頁(yè)面的切換，典型的SPA模式；

所以默認(rèn)的選項(xiàng)卡只適用于頁(yè)面內(nèi)多個(gè)div切換顯示，如要做頁(yè)面跳轉(zhuǎn)，則需要加javaScript代碼修改瀏覽器地址。

手機(jī)版加入代碼：

mui(‘body‘).on(‘tap‘,‘a(chǎn)‘,function(){document.location.href=this.href;});

電腦版加入代碼：

mui(‘body‘).on(‘click‘,‘a(chǎn)‘,function(){document.location.href=this.href;});

引申：

為什么手機(jī)中要用trap，而不和電腦一樣的click事件。

首先兩者都會(huì)在點(diǎn)擊時(shí)觸發(fā)，但是在手機(jī)web端，click會(huì)有 200~300 ms，所以請(qǐng)用tap代替click作為點(diǎn)擊事件。但在本次問(wèn)題中，在手機(jī)web端使用click，也能實(shí)現(xiàn)跳轉(zhuǎn)，并無(wú)影響

MUI底部選項(xiàng)卡鏈接跳轉(zhuǎn)不了

最近更新了ios11.3,項(xiàng)目上發(fā)現(xiàn)這么一個(gè)問(wèn)題，“我的”頁(yè)面和兩個(gè)列表頁(yè)的滾動(dòng)出現(xiàn)了問(wèn)題，滾動(dòng)時(shí)候不僅滾動(dòng)了希望滾動(dòng)的部分，整體的頁(yè)面也跟隨者上下滾動(dòng)，整個(gè)頁(yè)面非?？D。

1. 這兩個(gè)頁(yè)面都用了touch事件

2. 控制臺(tái)打印如下警告：

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. 
See https://www.chromestatus.com/features/5093566007214080

解決辦法1：

在touch的事件監(jiān)聽(tīng)方法上綁定第三個(gè)參數(shù){ passive: false }，
通過(guò)傳遞 passive 為 false 來(lái)明確告訴瀏覽器：事件處理程序調(diào)用 preventDefault 來(lái)阻止默認(rèn)滑動(dòng)行為。

elem.addEventListener(  'touchstart',
  fn,
  { passive: false }
);

解決辦法2：

 * { touch-action: pan-y; } 
 使用全局樣式樣式去掉

Passive event listeners

2016年Google I/O上提出的概念，目的是用來(lái)提升頁(yè)面滑動(dòng)的流暢度。

For instance, in Chrome for Android 80% of the touch events that block scrolling never actually prevent it. 10% of these events add more than 100ms of delay to the start of scrolling, and a catastrophic delay of at least 500ms occurs in 1% of scrolls.

在 Android 版 Chrome 瀏覽器的 touch 事件監(jiān)聽(tīng)器的頁(yè)面中，80% 的頁(yè)面都不會(huì)調(diào)用 preventDefault 函數(shù)來(lái)阻止事件的默認(rèn)行為。在滑動(dòng)流暢度上，有 10% 的頁(yè)面增加至少 100ms 的延遲，1% 的頁(yè)面甚至增加 500ms 以上的延遲。

由于瀏覽器無(wú)法預(yù)先知道一個(gè)事件處理函數(shù)中會(huì)不會(huì)調(diào)用 preventDefault()，它需要等到事件處理函數(shù)執(zhí)行完后，才能去執(zhí)行默認(rèn)行為，然而事件處理函數(shù)執(zhí)行是要耗時(shí)的，這樣一來(lái)就會(huì)導(dǎo)致頁(yè)面卡頓，也就是說(shuō)，當(dāng)瀏覽器等待執(zhí)行事件的默認(rèn)行為時(shí)，大部分情況是白等了。

如果 Web 開(kāi)發(fā)者能夠提前告訴瀏覽器：“我不調(diào)用 preventDefault 函數(shù)來(lái)阻止事件事件行為”，那么瀏覽器就能快速生成事件，從而提升頁(yè)面性能，Passive event listeners 的提出就解決了這樣的問(wèn)題。

• event
• 滑動(dòng)