passive模式
修飾符:.passive
- (2.3.0) 以 { passive: true }
模式添加偵聽器,也就是執行默認行為
passive這個修飾符會執行默認方法。你們可能會問,明明默認執行為什么會設置這樣一個修飾符。這就要說一下這個修飾符的本意了。
【瀏覽器只有等內核線程執行到事件監聽器對應的JavaScript代碼時,才能知道內部是否會調用preventDefault函數來阻止事件的默認行為,所以瀏覽器本身是沒有辦法對這種場景進行優化的。這種場景下,用戶的手勢事件無法快速產生,會導致頁面無法快速執行滑動邏輯,從而讓用戶感覺到頁面卡頓。】
通俗點說就是每次事件產生,瀏覽器都會去查詢一下是否有preventDefault阻止該次事件的默認動作。我們加上passive就是為了告訴瀏覽器,不用查詢了,我們沒用preventDefault阻止默認動作,從而提高了性能
這里一般用在滾動監聽,@scoll,@touchmove 。因為滾動監聽過程中,移動每個像素都會產生一次事件,每次都使用內核線程查詢prevent會使滑動卡頓。我們通過passive將內核線程查詢跳過,可以大大提升滑動的流暢度。
注:不要把 .passive
和 .prevent
一起使用,因為 .prevent
將會被忽略,同時瀏覽器可能會向你展示一個警告。請記住,.passive
會告訴瀏覽器你不想阻止事件的默認行為,而prevent會告訴瀏覽器阻止事件的默認行為。
因此passive和prevent沖突,不能同時綁定在一個監聽器上。