如何使移动端 “触摸滚动” 比默认的速度更快
默认触摸滚动 PK 优化后触摸滚动
我们知道滚动响应是至关重要的在用户移动端网站上触摸的时候，然而触摸事件监听器经常会导致严重的滚动性能问题。Chrome已经通过允许触摸事件监听器被动地解决了这个问题(将{passive:true}选项传递给addEventListener())并传递指针事件API。这些特性可以驱动新内容引入到不阻止滚动的模型中，但开发人员有时会发现它们很难理解和采用。
我们认为，如果开发人员不需要了解浏览器行为的晦涩细节，web应该在默认情况下是快速的。在Chrome 56中，默认情况下，我们将默认的触摸监听器设置为被动的，而这通常与开发人员的意图相匹配。我们相信这样做，我们可以大大提高用户的体验，同时减少对站点的负面影响。
在极少数情况下，这种变化会导致非预期的滚动。这通常是通过添加一个 touch-action: none样式使得元素滚动不再出现。阅读有关细节，如何知道你是否受到影响，以及你能做些什么。
背景: Cancelable 事件降低你的页面速度
如果在touchstart或第一个touchmove事件中调用preventDefault()，那么您将阻止滚动。问题是，大多数情况下，监听器不会调用preventDefault()，但是浏览器需要等待事件完成才能确定它。开发人员定义的“被动事件监听器”解决了这个问题。当您在事件处理程序中添加一个带有{passive:true}对象作为第三个参数的触摸事件时，您将告诉浏览器touchstart监听器不会调用preventDefault()，而浏览器可以安全地执行滚动，而不会阻塞监听器。例如：
window.addEventListener("touchstart", func, {passive: true} );
干预 The Intervention
我们的主要目的是减少在用户触摸屏幕后更新显示所需的时间。为了理解touchstart和touchmove的使用，我们添加了一些指标来确定滚动阻塞行为发生的频率。
我们看了可取消触摸事件，被发送到根目标(窗口、文档或主体)的的百分比，并确定大约80%的监听器在概念上是被动的，但未被注册为此类。考虑到这个问题的规模，我们注意到一个很大的机会，可以在没有任何开发人员操作的情况下，自动地passive改进滚动。
这促使我们将我们的干预定义为:如果触点或触控式监听器的目标是窗口、文档或主体，我们默认passive为true。代码示例：
window.addEventListener("touchstart", func);
相当于
window.addEventListener("touchstart", func, {passive: true} );
现在，在监听器内部调用preventDefault()将被忽略。
下面的图显示用户触摸屏幕时，从用户触摸屏幕到显示更新时所花费的时间。这一数据适用于所有的安卓网站。在干预之前，1%的卷轴使用了400多毫秒。现在已经减少到超过250ms的Chrome 56 Beta;大约减少了38%。在未来，我们希望使所有touchstart和touchmove侦听器的默认值都是被动的，将其降低到50毫秒以下。
image.png
问题和指导 Breakage and Guidance
在绝大多数情况下，没有问题。但当问题发生时，最常见的症状是当你不想要的时候滚动。在极少数情况下，开发人员还可能注意到意外的单击事件(在touchend侦听器中丢失了preventDefault())。
在Chrome 56和稍后的版本中，当您调用preventDefault()时，DevTools将记录一个警告，在这个事件中，干预是激活的。
touch-passive.html:19 Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
您的应用程序可以通过检查调用preventDefault是否通过defaultPrevented属性来确定它是否出现问题。
我们发现，只要有可能，应用touch-actionCSS属性就可以相对容易地修复大部分受影响页面。 如果你希望阻止浏览器的滚动和缩放，可以再元素中应用touch-action: none来实现。你过你需要水平的滚动，可以应用touch-action: pan-y pinch-zoom,这样用户仍然可以正常使用垂直滚动和缩放。在桌面边缘等浏览器上，正确地应用touch-action已经是必要的了，它支持指针事件，而不是触摸事件。对于不支持touch-action的移动Safari和老式移动浏览器，您的触摸监听器必须继续调用preventDefault，即使它将被Chrome忽略。
在更复杂的情况下，可能还需要依赖以下的一个:
- 如果您的
touchstart监听器调用preventDefault()，确保preventDefault()也从相关的touchend监听器被调用，以继续禁止单击事件的生成和其他默认的点击行为。 - 最后(不推荐)通过
{passive:false}到addEventListener()来覆盖默认行为。请注意，如果用户代理支持EventListenerOptions，则必须进行功能检测。
总结 Conclusion
在Chrome 56中，在许多网站上滚动的速度要快得多。这是大多数开发人员由于这种变化而引起的惟一影响。在某些情况下，开发人员可能会注意到无意识的滚动。
尽管对于移动Safari来说仍然需要这样做，但网站不应该依赖于在touchstart和touchmove监听器内部调用preventDefault()，因为这不再保证在Chrome中能够支持。开发人员应该在滚动和缩放的元素上应用touch-actionCSS属性，在发生任何触摸事件之前通知浏览器。要禁止点击的默认行为(例如单击事件生成)，请在touchend监听器内部调用preventDefault()。
