73.移動端Web界面滾動性能優化 Passive event listeners

題，滾動時候不只滾動了但願滾動的部分，總體的頁面也跟隨者上下滾動，整個頁面很是卡頓。

1. 這兩個頁面都用了touch事件
2. 控制檯打印以下警告：

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

解決辦法1：

在touch的事件監聽方法上綁定第三個參數{ passive: false }，
經過傳遞 passive 爲 false 來明確告訴瀏覽器：事件處理程序調用 preventDefault 來阻止默認滑動行爲。

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

解決辦法2：

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

Passive event listeners

2016年Google I/O上提出的概念，目的是用來提高頁面滑動的流暢度。

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 事件監聽器的頁面中，80% 的頁面都不會調用 preventDefault 函數來阻止事件的默認行爲。在滑動流暢度上，有 10% 的頁面增長至少 100ms 的延遲，1% 的頁面甚至增長 500ms 以上的延遲。

因爲瀏覽器沒法預先知道一個事件處理函數中會不會調用 preventDefault()，它須要等到事件處理函數執行完後，才能去執行默認行爲，然而事件處理函數執行是要耗時的，這樣一來就會致使頁面卡頓，也就是說，當瀏覽器等待執行事件的默認行爲時，大部分狀況是白等了。

若是 Web 開發者可以提早告訴瀏覽器：「我不調用 preventDefault 函數來阻止事件事件行爲」，那麼瀏覽器就能快速生成事件，從而提高頁面性能，Passive event listeners 的提出就解決了這樣的問題。

小禮物走

做者：辣瓜 連接：https://www.jianshu.com/p/04bf173826aa 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。