vue的源码剖析（passive特征，觉得是口试加分项）

2024年5月26日 275次阅读 来源: 白茶清欢

本日我看源码，由于一边看一边记笔记所以看的慢。倏忽发明一个特征。所以零丁开一篇。

觉得是一个秀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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞