我們知道滾動響應是至關重要的在用戶移動端網站上觸摸的時候，然而觸摸事件監聽器經常會導致嚴重的滾動性能問題。Chrome已經通過允許觸摸事件監聽器被動地解決了這個問題(將{passive:true}選項傳遞給addEventListener())并傳遞指針事件API。這些特性可以驅動新內容引入到不阻止滾動的模型中，但開發人員有時會發現它們很難理解和采用。
我們認為，如果開發人員不需要了解瀏覽器行為的晦澀細節，web應該在默認情況下是快速的。在Chrome 56中，默認情況下，我們將默認的觸摸監聽器設置為被動的，而這通常與開發人員的意圖相匹配。我們相信這樣做，我們可以大大提高用戶的體驗，同時減少對站點的負面影響。
在極少數情況下，這種變化會導致非預期的滾動。這通常是通過添加一個 touch-action: none樣式使得元素滾動不再出現。閱讀有關細節，如何知道你是否受到影響，以及你能做些什么。
背景: Cancelable 事件降低你的頁面速度
如果在touchstart或第一個touchmove事件中調用preventDefault()，那么您將阻止滾動。問題是，大多數情況下，監聽器不會調用preventDefault()，但是瀏覽器需要等待事件完成才能確定它。開發人員定義的“被動事件監聽器”解決了這個問題。當您在事件處理程序中添加一個帶有{passive:true}對象作為第三個參數的觸摸事件時，您將告訴瀏覽器touchstart監聽器不會調用preventDefault()，而瀏覽器可以安全地執行滾動，而不會阻塞監聽器。例如：
window.addEventListener("touchstart", func, {passive: true} );
干預 The Intervention
我們的主要目的是減少在用戶觸摸屏幕后更新顯示所需的時間。為了理解touchstart和touchmove的使用，我們添加了一些指標來確定滾動阻塞行為發生的頻率。
我們看了可取消觸摸事件，被發送到根目標(窗口、文檔或主體)的的百分比，并確定大約80%的監聽器在概念上是被動的，但未被注冊為此類。考慮到這個問題的規模，我們注意到一個很大的機會，可以在沒有任何開發人員操作的情況下，自動地passive改進滾動。
這促使我們將我們的干預定義為:如果觸點或觸控式監聽器的目標是窗口、文檔或主體，我們默認passive為true。代碼示例：
window.addEventListener("touchstart", func);
相當于
window.addEventListener("touchstart", func, {passive: true} );
現在，在監聽器內部調用preventDefault()將被忽略。
下面的圖顯示用戶觸摸屏幕時，從用戶觸摸屏幕到顯示更新時所花費的時間。這一數據適用于所有的安卓網站。在干預之前，1%的卷軸使用了400多毫秒。現在已經減少到超過250ms的Chrome 56 Beta;大約減少了38%。在未來，我們希望使所有touchstart和touchmove偵聽器的默認值都是被動的，將其降低到50毫秒以下。
問題和指導 Breakage and Guidance
在絕大多數情況下，沒有問題。但當問題發生時，最常見的癥狀是當你不想要的時候滾動。在極少數情況下，開發人員還可能注意到意外的單擊事件(在touchend偵聽器中丟失了preventDefault())。
在Chrome 56和稍后的版本中，當您調用preventDefault()時，DevTools將記錄一個警告，在這個事件中，干預是激活的。
touch-passive.html:19 Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
您的應用程序可以通過檢查調用preventDefault是否通過defaultPrevented屬性來確定它是否出現問題。
我們發現，只要有可能，應用touch-actionCSS屬性就可以相對容易地修復大部分受影響頁面。 如果你希望阻止瀏覽器的滾動和縮放，可以再元素中應用touch-action: none來實現。你過你需要水平的滾動，可以應用touch-action: pan-y pinch-zoom,這樣用戶仍然可以正常使用垂直滾動和縮放。在桌面邊緣等瀏覽器上，正確地應用touch-action已經是必要的了，它支持指針事件，而不是觸摸事件。對于不支持touch-action的移動Safari和老式移動瀏覽器，您的觸摸監聽器必須繼續調用preventDefault，即使它將被Chrome忽略。
在更復雜的情況下，可能還需要依賴以下的一個:
- 如果您的
touchstart監聽器調用preventDefault()，確保preventDefault()也從相關的touchend監聽器被調用，以繼續禁止單擊事件的生成和其他默認的點擊行為。 - 最后(不推薦)通過
{passive:false}到addEventListener()來覆蓋默認行為。請注意，如果用戶代理支持EventListenerOptions，則必須進行功能檢測。
總結 Conclusion
在Chrome 56中，在許多網站上滾動的速度要快得多。這是大多數開發人員由于這種變化而引起的惟一影響。在某些情況下，開發人員可能會注意到無意識的滾動。
盡管對于移動Safari來說仍然需要這樣做，但網站不應該依賴于在touchstart和touchmove監聽器內部調用preventDefault()，因為這不再保證在Chrome中能夠支持。開發人員應該在滾動和縮放的元素上應用touch-actionCSS屬性，在發生任何觸摸事件之前通知瀏覽器。要禁止點擊的默認行為(例如單擊事件生成)，請在touchend監聽器內部調用preventDefault()。
