移动端Web界面滚动性能优化: Passive event listeners

移动端Web界面滚动性能优化: Passive event listeners

今晚在阅读VueJS2的源码时，发现了下面的一段代码，感觉自己瞬间知识储备不够用了，所以决定深入研究一下，故总结得出此文。关于VueJS的源码解读，之后会整理出学习笔记。这里先简单记录一些碎片化的知识点。

 try {
    const opts = {}
    Object.defineProperty(opts, 'passive', ({
      get () {
        /* istanbul ignore next */
        supportsPassive = true
      }
    } : Object))
    window.addEventListener('test-passive', null, opts)
  } catch (e) {}

Passive event listeners 到底是什么，它有什么用

Passive event listeners是2016年Google I/O 上同 PWA 概念一起被提出，但是同PWA不同，Passive event listeners
的作用很简单，如果用简单一句话来解释就是：提升页面滑动的流畅度。

为什么会提出这个方案以及如何使用

想要很好的理解其用途，我们需要先来看一下传统的事件监听函数的写法，以及其执行流程，这里只做简单的复习，更多细节可以参考《JavaScript高级程序设计》（第三版）第13章。

addEventListener 用来在页面中监听事件，它的参数签名是这样的：

target.addEventListener(type, listener[, useCapture]);

但是如果你现在去查询 MDN 的文档却发现是这样写的：