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,
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});
    原文作者:白茶清欢
    原文地址: https://segmentfault.com/a/1190000018564264
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞