移动浏览器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将避免设定一个监听器,所以,你可以享受两全其美。

时间: 2024-08-27 07:37:02

移动浏览器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

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中多次点击事件的实现

1.在android系统中,设置里面->关于手机->安卓版本(即android version),三击后会出现android该个版本的版本号,以及一些动图,算是一个彩蛋吧! 2.导入setting源代码,ctrl+h搜索文件(关键字Android Version),搜索到了之后打开xml文件 3.是一个strings.xml文件,再次找到关键字firmware_version,再搜索.找到src下的源代码文件 4.又找到一个关键字KEY_FIRMWARE_VERSION,翻一翻找到关于多次点击

Android学习---ListView的点击事件,simpleAdapter和arrayadapter的原理和使用 - Hi_Amos

如题,本文将介绍 listview的点击事件,simpleAdapter和arrayadapter的原理和使用. 1.ListView的注册点击事件 //注册点击事件 personListView.setOnItemClickListener(new AdapterView.OnItemClickListener() { /** * * @param parent 当前ListView * @param view 代表当前被点击的条目 * @param position 当前条目的位置 * @p

Android安装应用后点击&quot;打开&quot;(Open)带来的问题及解决方式

MainActivity如下: package cc.cc; import android.app.Activity; import android.content.Intent; import android.os.Bundle; /** * Demo描述: * * 一年多前遇到一个问题--->: * 1 客户从GooglePlay上下载了我参与的开发的应用 * 2 下载完成后,点击安装 * 3 安装完成后,在屏幕底部有两个选项"打开"和"完成" * 4 点