移動端Web界面滾動性能優(yōu)化 Passive event listeners
最近更新了ios11.3,項目上發(fā)現(xiàn)這么一個問題锦聊，“我的”頁面和兩個列表頁的滾動出現(xiàn)了問題公你，滾動時候不僅滾動了希望滾動的部分，整體的頁面也跟隨者上下滾動恢准，整個頁面非持肟牵卡頓寞缝。
- 這兩個頁面都用了touch事件
- 控制臺打印如下警告：
[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)聽方法上綁定第三個參數(shù){ passive: false }，
通過傳遞 passive 為 false 來明確告訴瀏覽器：事件處理程序調(diào)用 preventDefault 來阻止默認(rèn)滑動行為蛹批。
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 事件監(jiān)聽器的頁面中，80% 的頁面都不會調(diào)用 preventDefault 函數(shù)來阻止事件的默認(rèn)行為了赵。在滑動流暢度上潜支，有 10% 的頁面增加至少 100ms 的延遲，1% 的頁面甚至增加 500ms 以上的延遲柿汛。
由于瀏覽器無法預(yù)先知道一個事件處理函數(shù)中會不會調(diào)用 preventDefault()冗酿，它需要等到事件處理函數(shù)執(zhí)行完后，才能去執(zhí)行默認(rèn)行為络断，然而事件處理函數(shù)執(zhí)行是要耗時的裁替，這樣一來就會導(dǎo)致頁面卡頓，也就是說貌笨，當(dāng)瀏覽器等待執(zhí)行事件的默認(rèn)行為時弱判，大部分情況是白等了。
如果 Web 開發(fā)者能夠提前告訴瀏覽器：“我不調(diào)用 preventDefault 函數(shù)來阻止事件事件行為”锥惋，那么瀏覽器就能快速生成事件昌腰，從而提升頁面性能，Passive event listeners 的提出就解決了這樣的問題膀跌。
