Vue學習(八)passive:true模式


passive模式

修飾符:.passive - (2.3.0) 以 { passive: true } 模式添加偵聽器,也就是執行默認行為

passive這個修飾符會執行默認方法。你們可能會問,明明默認執行為什么會設置這樣一個修飾符。這就要說一下這個修飾符的本意了。

【瀏覽器只有等內核線程執行到事件監聽器對應的JavaScript代碼時,才能知道內部是否會調用preventDefault函數來阻止事件的默認行為,所以瀏覽器本身是沒有辦法對這種場景進行優化的。這種場景下,用戶的手勢事件無法快速產生,會導致頁面無法快速執行滑動邏輯,從而讓用戶感覺到頁面卡頓。】

通俗點說就是每次事件產生,瀏覽器都會去查詢一下是否有preventDefault阻止該次事件的默認動作。我們加上passive就是為了告訴瀏覽器,不用查詢了,我們沒用preventDefault阻止默認動作,從而提高了性能

這里一般用在滾動監聽,@scoll,@touchmove 。因為滾動監聽過程中,移動每個像素都會產生一次事件,每次都使用內核線程查詢prevent會使滑動卡頓。我們通過passive將內核線程查詢跳過,可以大大提升滑動的流暢度。

注:不要把 .passive 和 .prevent 一起使用,因為 .prevent 將會被忽略,同時瀏覽器可能會向你展示一個警告。請記住,.passive 會告訴瀏覽器你想阻止事件的默認行為,而prevent會告訴瀏覽器阻止事件的默認行為。

因此passive和prevent沖突,不能同時綁定在一個監聽器上。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM