移动浏览器Chrome 32 for Android移除300ms点击推迟

在手机浏览器的一篇文章翻译300ms延迟实用文章，原文地址  http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

去掉移动设备浏览器上的300ms点击延迟

你能够在站点上找到非常多关于在为了高速流畅的站点用户体验。在某个地方降低10ms或90ms的文章。不幸的是。在基于触屏的跨平台移动浏览器上，触碰或点击一个物体时有一个人为的300ms延迟，即300ms后浏览器才觉得是一个点击事件。当人们觉得移动Web应用比原生应用慢时，这个问题是罪魁祸首之中的一个。

然而， 在Chrome
32 for Android中。如今它还是測试版本号，在为移动优化过的站点上，这个延迟已经去掉了。而且仍然支持两指缩放！

这个优化能够用在不论什么站点上，仅仅要加上以下一句就能够了

<meta
name="viewport"
content="width=device-width"]]>



        (或者是其他等价于viewport <= device-width的meta定义)

为什么点击事件有一个300ms延迟？

假设你訪问一个没有为移动设备优化的站点，浏览器会缩小页面以便你能看到整个页面宽带，为了阅读内容，你能够捏缩放，或者双击某些内容放大。双击就是性能杀手，由于每次点击我们必须等待，以便知道它是否是一个双击事件，等待时间是300ms，以下是实现过程：
1.touchstart
2.touchend
3.Wait 300ms in case of another tap
4.click
这个延迟不但应用到了javascript的点击事件，并且应用到了其他基于点击的用户交互。比如链接和表单控件。

你不能简单的通过touchend监听器取消这个延迟，在Chrome 32以外的其他移动浏览器对照以下的样例
Using click events Using touchend events
    点击行会改变它的颜色。

touchend实现的样例更快，可是但浏览器滚动页面时仍然会触发延迟。这是由于W3C规范并未定义在touch事件流程中什么能够取消。最新版本号的 iOS Safari, Firefox, IE, 和旧版本号的Android Browser在页面滚动后触发touchend。而Chrome不会。

 Microsoft's PointerEvents spec
做了正确的事情。规定当底层的事件（比如页面滚动）发生时pointerup不被触发。然而。眼下IE仅仅支持鼠标事件，尽管Chrome针对这个问题做了提案。

即使这样。300ms延迟也仅仅在全部链接，表单元素和javascript交互都使用了这个监听器的站点上才被取消了。

Chrome是如何去掉300ms延迟的？ Chrome和Firefox的android版本号已经为加入了以下的meta的网页去掉了tap事件的300ms延时

<meta
name="viewport"
content="width=device-width,
user-scalable=no"]]>

添加了这个meta的网页不能被缩放，因而双击缩放不再是一个可用的用户交互，所以也就不须要等待双击了。

然而，我们相同失去了二指捏动缩放功能。

当我们看照片。一些小的文字，或处理一些紧挨着的button或链接时，二指缩放功能是非常实用的。这是一个开箱即用的易用性功能。

     假设一个站点加入了

    <meta
name="viewport"
content="width=device-width"]]>

…双击时会缩放一点。不是特别明显的数量。

再双击一下会变回原样。我们发现这个特性对移动优化的站点来说没有什么用处。所以就删除了它！这意味着我们能够直接觉得tap事件和click事件一样，可是我们保留了二指缩放（retain pinch-zooming）。

这样的变化如今可以使用了吗?

我们不觉得如此。因此我们公布了Chrome測试版本号包括这个功能，以便用户能够体验新的功能并给我们反馈。

       我们想象了这个功能会影响到用户的场景：

       对在页面同一个位置的不是捏动缩放的双击事件多点触控操作有直接的负面影响

        对针对移动设备优化的站点，有由于取消了双击事件带来的轻微视觉影响

      可是这2个问题都能够用Chrome设置里面的字体大小设置工具。和遍布App和网页的android放大镜解决，放大镜能够用三次tap触发。



      不管怎样，我们可能忽视了一些问题，假设你被这个修改影响到了，请在通过评论或提单让我们知道。

其他的浏览器也会这样做吗？

我不知道，但希望它们也这样处理。

     Firefox针对这个问题有个bug单。在不能够缩放的网页上，如今已经避免了300ms延迟。

    在iOS Safari浏览器上。在不能够缩放的网页上，double-tap是一个滚动手势。

因此也去掉了300ms延时。

他们不想在能够缩放的网页上去掉它。

Windows Phone仍然在不可缩放的网页上保留了300ms延迟，但没有像iOS那样提供了替换的手势，因此以后能够像Chrome那样去掉300ms延迟。你能够使用以下的css去掉延迟

html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

不幸的是。这是一个针对指针事件标准的微软的扩展。开发人员能够选择使用上面的代码处理Windows Phone浏览器上的300ms延迟，而Chrome的改动能够加速全部针对移动设备优化过的站点。

同一时候还有其他的一些解决方式...

FastClick by FT Labs使用touch事件触发高速点击，并去掉双击手势，它是通过推断touch start和touched事件的手指移动距离实现的。

为无论元素添加什么touchstart听众有性能的影响，由于底层交互，如页面滚动将被称为监听器延迟，好在，假设浏览器已停用300ms延迟，FastClick将避免设定一个监听器，所以，你可以享受两全其美。