vue的源碼解析(passive特性,感受是面試加分項)

今天我看源碼,由於一邊看一邊記筆記因此看的慢。忽然發現一個特性。因此單獨開一篇。
感受是一個秀bigger的特性,若是有一天面試官問你發現優化頁面的時候,
你提出能夠檢查瀏覽器是否可使用該特性。提高滾動流暢度。

passive

var supportsPassive = false;
  if (inBrowser) {
    try {
      var opts = {};
      Object.defineProperty(opts, 'passive', ({
        get: function get () {
          /* istanbul ignore next */
          supportsPassive = true;
        }
      })); // https://github.com/facebook/flow/issues/285
      window.addEventListener('test-passive', null, opts);
    } catch (e) {}
  }

這裏核心是檢查是否支持Passive,
tipsgit

  • 1, passive是什麼?Chrome提出的一個新的瀏覽器特性:Web開發者經過一個新的屬性passive來告訴瀏覽器,當前頁面內註冊的事件監聽器內部是否會調用preventDefault函數來阻止事件的默認行爲,以便瀏覽器根據這個信息更好地作出決策來優化頁面性能。當屬性passive的值爲true的時候,表明該監聽器內部不會調用preventDefault函數來阻止默認滑動行爲,Chrome瀏覽器稱這類型的監聽器爲被動(passive)監聽器。目前Chrome主要利用該特性來優化頁面的滑動性能,因此Passive Event Listeners特性當前僅支持mousewheel/touch相關事件
  • 2, Passive Event Listeners特性是爲了提升頁面的滑動流暢度而設計的,頁面滑動流暢度的提高,直接影響到用戶對這個頁面最直觀的感覺。這個不難理解,想象一下你想要滑動某個頁面瀏覽內容,當你用鼠標滾輪或者用手指觸摸屏幕上下滑動的時候,頁面並無按你的預期進行滾動,此時你心裏每每會感受到一絲不爽,甚至想放棄該頁面。Facebook以前作了一項試驗,他們將頁面滑動的響應刷新率從60FPS下降到30FPS的時候,發現用戶的參與度急速降低。
  • 3,passive的簡單實現
function handler(event) {
        console.log(event.type); // log event type
    }
document.addEventListener("mousewheel", handler, {passive:true});
相關文章
相關標籤/搜索