vue的源码解析（passive特性，感觉是面试加分项）

Karrdy 发布于2019-08-02 14:33 / 1593人阅读

摘要：突然发现一个特性。这里核心是检查是否支持，是什么提出的一个新的浏览器特性开发者通过一个新的属性来告诉浏览器，当前页面内注册的事件监听器内部是否会调用函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。

今天我看源码，因为一边看一边记笔记所以看的慢。突然发现一个特性。所以多带带开一篇。
感觉是一个秀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新特性是

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53885.html

vue的源码解析（passive特性，感觉是面试加分项）

摘要：突然发现一个特性。这里核心是检查是否支持，是什么提出的一个新的浏览器特性开发者通过一个新的属性来告诉浏览器，当前页面内注册的事件监听器内部是否会调用函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。今天我看源码，因为一边看一边记笔记所以看的慢。突然发现一个特性。所以单独开一篇。感觉是一个秀bigger的特性，如果有一天面试官问你发现优化页面的时候，你提出可...

phodal 2019-08-30 15:56 评论0 收藏0
vue的源码解析（passive特性，感觉是面试加分项）

摘要：突然发现一个特性。这里核心是检查是否支持，是什么提出的一个新的浏览器特性开发者通过一个新的属性来告诉浏览器，当前页面内注册的事件监听器内部是否会调用函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。今天我看源码，因为一边看一边记笔记所以看的慢。突然发现一个特性。所以单独开一篇。感觉是一个秀bigger的特性，如果有一天面试官问你发现优化页面的时候，你提出可...

0x584a 2019-08-23 16:04 评论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