移动Web滚动性能优化 Passive event listeners
addEventListener 用来在页面中监听事件，它的语法是：
target.addEventListener(type, listener[, useCapture]);
最后一个参数 useCapture 在很久之前是必填的，后来的规范将 useCapture 变成了选填。useCapture 参数用来控制监听器是在捕获阶段执行还是在冒泡阶段执行，true 为捕获阶段，false 为冒泡阶段，变成选填后默认值为 false（冒泡阶段），因为传 true 的情况太少了。
此过程被称为事件传播。如果我们为每个元素都绑定事件，那么在事件冒泡过程中，子元素最先响应事件，然后依次向父元素冒泡。
在事件处理函数中，会传递 Event 对象作为参数，而这个参数最常用的 2 个方法就是 event.preventDefault() 和 event.stopPropagation()。
- stopPropagation() 阻止事件传播
- preventDefault() 阻止事件的默认行为
在移动网页中，我们经常使用的就是 touch 系列的事件，如：
- touchstart
- touchmove
- touchend
- touchcancel
我们可以使用如下方式绑定 touchstart 事件：
div.addEventListener("touchstart", function(e){
// do sth.
})
由于第三个参数没有传值，那么默认就是 false，也就是这个事件在冒泡阶段被处理，如果调用了 stopPropagation() 则 div 的父元素就无法接收这个事件。
那么如果我们调用了 preventDefault() 呢？如果你曾经给超链接 a 标签绑定过 click 事件应该就知道会发生什么了。当 a 标签点击时，它的默认行为是跳转到 href 指定的链接，如果我们调用了 preventDefault 就阻止了 a 标签点击事件的默认行为。（如果你使用 jQuery 通过 return false 可以阻止事件默认行为，但是深记 You Might Not Need jQuery ）
如果我们在 touchstart 事件调用 preventDefault 会怎样呢？这时页面会禁止，不会滚动或缩放。那么问题来了：浏览器无法预先知道一个监听器会不会调用 preventDefault()，它需要等监听器执行完后，再去执行默认行为，而监听器执行是要耗时的，这样就会导致页面卡顿。
这段翻译的太专业了，你可以这么理解：当你触摸滑动页面时，页面应该跟随手指一起滚动。而此时你绑定了一个 touchstart 事件，你的事件大概执行 200 毫秒。这时浏览器就犯迷糊了：如果你在事件绑定函数中调用了 preventDefault，那么页面就不应该滚动，如果你没有调用 preventDefault，页面就需要滚动。但是你到底调用了还是没有调用，浏览器不知道。只能先执行你的函数，等 200 毫秒后，绑定事件执行完了，浏览器才知道，“哦，原来你没有阻止默认行为，好的，我马上滚”。此时，页面开始滚。
在 Android 版 Chrome 浏览器的 touch 事件监听器的页面中，80% 的页面都不会调用 preventDefault 函数来阻止事件的默认行为。在滑动流畅度上，有 10% 的页面增加至少 100ms 的延迟，1% 的页面甚至增加 500ms 以上的延迟。
也就是说，当浏览器等待执行事件的默认行为时，大部分情况是白等了。如果 Web 开发者能够提前告诉浏览器：“我不调用 preventDefault 函数来阻止事件事件行为”，那么浏览器就能快速生成事件，从而提升页面性能。
而 passive 就是为此而生的。在 WICG 的 demo 中提到，即使滚动事件里面写一个死循环，浏览器也能够正常处理页面的滑动。
在最新的 DOM 规范中，事件绑定函数的第三个参数变成了对象：
target.addEventListener(type, listener[, options]);
我们可以通过传递 passive 为 true 来明确告诉浏览器，事件处理程序不会调用 preventDefault 来阻止默认滑动行为。
在 Chrome 浏览器中，如果发现耗时超过 100 毫秒的非 passive 的监听器，会在 DevTools 里面警告你加上 {passive: true}。
Chrome 51 和 Firefox 49 已经支持 passive 属性。如果浏览器不支持，已经有人做了非常巧妙地 polyfill：
// Test via a getter in the options object to see
// if the passive property is accessed
var supportsPassive = false;
try {
var options = Object.defineProperty({}, 'passive', {
get: function() {
supportsPassive = true;
}
});
window.addEventListener("test", null, options);
} catch (e) {}
// Use our detect's results.
// passive applied if supported, capture will be false either way.
elem.addEventListener(
'touchstart',
fn,
supportsPassive ? { passive: true } : false
);
这段代码为 passive 属性创建了一个带有getter函数的 options 对象；getter设定了一个标识， passiveSupported，被调用后就会把其设为true。那意味着如果浏览器检查 options 对象上的 passive 值时， passiveSupported 将会被设置为 true；否则它将保持 false。然后我们调用 addEventListener() 去设置一个指定这些选项的空事件处理器，这样如果浏览器将第三个参数认定为对象的话，这些选项值就会被检查。
你可以利用这个方法检查options之中任一个值。只需使用与上面类似的代码，为选项设定一个getter。