移动浏览器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的网页不能被缩放,因而双击缩放不再是一个可用的用户交互,所以也就不需要等待双击了。然而,我们同样失去了二指捏动缩放功能。

当我们看照片,一些小的文字,或处理一些紧挨着的按钮或链接时,二指缩放功能是很有用的。这是一个开箱即用的易用性功能。

如果一个网站添加了

<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会避免设置监听器,因此你可以享受到两者的好处。

移动浏览器Chrome 32 for Android去掉了300ms点击延迟,布布扣,bubuko.com

时间: 2024-10-12 13:29:19

移动浏览器Chrome 32 for Android去掉了300ms点击延迟的相关文章

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

在手机浏览器的一篇文章翻译300ms延迟实用文章,原文地址  http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away 去掉移动设备浏览器上的300ms点击延迟 你能够在站点上找到非常多关于在为了高速流畅的站点用户体验.在某个地方降低10ms或90ms的文章.不幸的是.在基于触屏的跨平台移动浏览器上,触碰或点击一个物体时有一个人为的300ms延迟,即300ms后浏览器才觉得是一个点击事件.当人们觉得移动Web应用比原生应用慢时

在 Chrome 中调试 Android 浏览器

最近需要使用 Chrome Developer Tools 调试 Android 浏览器,但是官方指南并不是很好使,经过一番折腾,终于调试成功了,在此把经验分享给需要的朋友. Chrome Developer Tools 是前端工程师必不可少的工具,它极大的提高了我们的开发调试效率.在移动开发的时代,我们也必须掌握手机浏览器在 Chrome 中调试的方法.本篇仅介绍 Android. 环境 不同的环境可能存在一些差异,我的环境是: Windows 10 电脑 Chrome 50.0.2661.7

在桌面chrome中调试android设备中的web页面

准备工作 1, 桌面版chrome 2, Android设备(安装有chrome浏览器) 3, Android-sdk Android-sdk安装及设置 SKD安装 从http://developer.android.com/sdk/index.html下载android-sdk开发包,安装后,执行SDK Manager.exe,安装android SDK Platform-tools工具包. 环境变量配置: 在环境变量添加path,并添加路径<sdk>/platform-tools; 添加后

不同浏览器(chrome,firefox,IE)在JQuery与原生JS之执行性能比较

本次测试所用浏览器为chrome(36.0.1985.125m),firefox(31.0),IE(8.0) 1. 比较JQuery在不同浏览器对于js的执行性能 计算插入20000条div节点所需时间 for(var i=0;i<20000;i++){ var divTag = document.createElement('div'); $("#chn").append(divTag); } Result: 时间单位ms chrome 584 614 593 574 596

Android去掉自动焦点

在EditText的父级控件中找一个,设置成 代码如下: android:focusable="true" android:focusableInTouchMode="true" Android去掉自动焦点,码迷,mamicode.com

android 去掉actionbar 隐藏标题栏 全屏

去掉actionbar :getActionBar().hide(); 全屏方法一: <activity            android:name="com.imax.weather.MainActivity"            android:label="@string/app_name"            android:screenOrientation="portrait"            android:th

google浏览器Chrome无法访问localhost等本地虚拟域名的解决方法

解决办法:Chrome>设置>更改代理服务器设置>连接>局域网勾选本地地址不使用代理服务器 具体以mac电脑为例:1.这个接口在火狐浏览器是能打开的,在google浏览器Chrome就打不开. 2.点Chrome右边三个点->设置 再点开'高级设置'->'系统' 找到'打开代理设置' 原来是被勾选上的,现在取消掉.自动跳到这个, 代理被勾选上. 现在取消掉,然后点'好' 6.点 '应用' 7.再回到浏览器看,OK了! 提示:在找 '打开代理设置'时,你可以在浏览器直接输

浏览器 Chrome for Mac 73.0 中文正式版下载 – 支持深色模式

今天和大家分享最新的 Google Chrome 73.0 for Mac 版本,此版本最重要的更新则是支持了 macOS Mojave 的深色模式,推荐更新!Chrome 是Mac上最优秀的浏览器之一,具有速度快.插件多等特点,是Mac上除了Safari外的最好浏览器了! 下载地址: 浏览器 Chrome for Mac 73.0 中文正式版下载 – 支持深色模式 原文地址:https://www.cnblogs.com/Morus-alba/p/10534406.html

[Android] Android 去掉界面标题栏的方法

Android 去掉界面标题栏的方法 这个首先要区分当前Activity 是继承了 Activity 类 ,还是 AppCompatActivity 类 情况一:创建的activity默认继承了AppCompatActivity 方法一)全局设置 可以在AndroidManifest.xml中作如下配置,这样就没有标题栏了 <application android:theme="@style/Theme.AppCompat.NoActionBar"> 方法二)针对当前页面单