移动浏览器Chrome 32 for Android去掉了300ms点击延迟

ゝ一纸荒年。 2022-08-24 11:16 155阅读 0赞

翻译一篇关于移动浏览器300ms延迟的有用文章，原文地址  [http://updates.][http_updates.][html5rocks.com/2013/12/300ms-tap-delay-gone-away][http_updates.]

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

你可以在网站上找到很多关于在为了快速流畅的网站用户体验，在某个地方减少10ms或90ms的文章。不幸的是，在基于触屏的跨平台移动浏览器上，触碰或点击一个物体时有一个人为的300ms延迟，即300ms后浏览器才认为是一个点击事件。当人们认为移动Web应用比原生应用慢时，这个问题是罪魁祸首之一。         然而， 在Chrome 32 for Android中，现在它还是测试版本，在为移动优化过的网站上，这个延迟已经去掉了，并且仍然支持两指缩放！        这个优化可以用在任何网站上，只要加上下面一句就可以了

<metaname="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延时

<metaname="viewport"content="width=device-width, user-scalable=no"\]\]>

增加了这个meta的网页不能被缩放，因而双击缩放不再是一个可用的用户交互，所以也就不需要等待双击了。然而，我们同样失去了二指捏动缩放功能。  
     当我们看照片，一些小的文字，或处理一些紧挨着的按钮或链接时，二指缩放功能是很有用的。这是一个开箱即用的易用性功能。  
     如果一个网站添加了  
    <metaname="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会避免设置监听器，因此你可以享受到两者的好处。

[http_updates.]: http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away