vue的源碼解析（程式碼範例）

這篇文章帶給大家的內容是關於vue的原始碼解析（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

今天我看原始碼，因為一邊看一邊記筆記所以看的慢。突然發現一個特性。所以單獨開一篇。

感覺是一個秀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，
tips

• 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});

這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的 JavaScript教學影片欄位！

以上是vue的源碼解析（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！