vue的源碼解析（passive特性，感覺是面試加分項）

Karrdy 發布于2019-08-02 14:33 / 1667人閱讀

摘要：突然發現一個特性。這里核心是檢查是否支持，是什么提出的一個新的瀏覽器特性開發者通過一個新的屬性來告訴瀏覽器，當前頁面內注冊的事件監聽器內部是否會調用函數來阻止事件的默認行為，以便瀏覽器根據這個信息更好地做出決策來優化頁面性能。

今天我看源碼，因為一邊看一邊記筆記所以看的慢。突然發現一個特性。所以多帶帶開一篇。
感覺是一個秀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});

云服務器 GPU云服務器 vue源碼 webrtc的aec源碼解析 vue webrtc 源碼 html新特性是

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53885.html

vue的源碼解析（passive特性，感覺是面試加分項）

摘要：突然發現一個特性。這里核心是檢查是否支持，是什么提出的一個新的瀏覽器特性開發者通過一個新的屬性來告訴瀏覽器，當前頁面內注冊的事件監聽器內部是否會調用函數來阻止事件的默認行為，以便瀏覽器根據這個信息更好地做出決策來優化頁面性能。今天我看源碼，因為一邊看一邊記筆記所以看的慢。突然發現一個特性。所以單獨開一篇。感覺是一個秀bigger的特性，如果有一天面試官問你發現優化頁面的時候，你提出可...

0x584a 2019-08-23 16:04 評論0 收藏0
vue的源碼解析（passive特性，感覺是面試加分項）

摘要：突然發現一個特性。這里核心是檢查是否支持，是什么提出的一個新的瀏覽器特性開發者通過一個新的屬性來告訴瀏覽器，當前頁面內注冊的事件監聽器內部是否會調用函數來阻止事件的默認行為，以便瀏覽器根據這個信息更好地做出決策來優化頁面性能。今天我看源碼，因為一邊看一邊記筆記所以看的慢。突然發現一個特性。所以單獨開一篇。感覺是一個秀bigger的特性，如果有一天面試官問你發現優化頁面的時候，你提出可...

phodal 2019-08-30 15:56 評論0 收藏0
Java面試 32個核心必考點完全解析

摘要：如問到是否使用某框架，實際是是問該框架的使用場景，有什么特點，和同類可框架對比一系列的問題。這兩個方向的區分點在于工作方向的側重點不同。 [TOC] 這是一份來自嗶哩嗶哩的Java面試Java面試 32個核心必考點完全解析（完）課程預習 1.1 課程內容分為三個模塊基礎模塊：技術崗位與面試計算機基礎 JVM原理多線程設計模式數據結構與算法應用模塊：常用工具集 ...

JiaXinYi 2019-08-16 16:53 評論0 收藏0
我是如何準備阿里的社招面試，給準備java社招的朋友的一個建議！

摘要：第一個問題阿里面試都問什么這個是讓我最頭疼的一個問題，也是群里的猿友們問的最多的一個問題。我參加的是阿里的社招面試，而社招不同于校招，問題的范圍其實是很隨機的。所以，不妨就這兩個階段，談談社招面試的準備，而不是去把阿里面試的過程背一遍。引言其實本來真的沒打算寫這篇文章，主要是記憶力不是很好，不像一些記憶力強的人，面試完以后，幾乎能把自己和面試官的對話都給記下來。自己當初面試完以后，除...

BoYang 2019-08-16 16:02 評論0 收藏0