阻止默認行爲是配合passive使用

在使用lighthouse檢測pwa應用時，發現提示下面有下面的警告

 

默認使用passive:true提升滾動性能並減小崩潰，passive即順從的，是指它順從瀏覽器的默認行爲。設置該屬性的目的主要是爲了在阻止事件默認行爲致使的卡頓。通常咱們寫阻止默認行爲的代碼以下：

ele.addEventListener('touchmove', function (e) { e.preventDefault();});

//若是咱們是爲了阻止頁面滾動添加了上述代碼，默認行爲就是滾動頁面，可是若是咱們阻止了這一默認行爲，瀏覽器是沒法預先知道的，必須等待事件監聽器執行完成後，才知道要去阻止默認行爲。等待監聽器的執行是耗時的，，有些甚至耗時很明顯，這樣就會致使頁面卡頓。即使監聽器是個空函數，也會產生必定的卡頓，畢竟空函數的執行也會耗時。因此就有了passive屬性，若是要阻止默認事件能夠設置passive：false，
//阻止事件的默認行爲時，

document.body.addEventListener('touchmove', function (e) {
    e.preventDefault(); //阻止默認的處理方式(阻止下拉滑動的效果)
}, {passive: false}); //passive 參數不能省略，用來兼容ios和android

 

//若是設置了passive爲true，同時又阻止默認行爲，阻止是不生效的

document.addEventListener("touchmove", function(event) {
event.preventDefault() //不產生做用
}, {
passive: true
})

 

詳細請參考：http://www.javashuo.com/article/p-zdzzqqqb-em.html