移动端300ms延迟_如何解决移动端300ms延迟的问题

声明一下：300ms只是行业内部的统称，其实应该在300ms-350ms之间的一个数值。

移动端300ms延迟的前世今生

背景： 2007 年初。苹果公司在发布首款iPhone前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对iPhone这种小屏幕浏览桌面端站点的问题。

这当中最出名的，当属双击缩放(double tap to zoom)。顾名思义，即用手指在屏幕上快速点击两次，iOS自带的Safari浏览器会将网页缩放至原始比例。如下图所示：

这是一个很好的设计啊！那它和延迟有什么关系呢？我们假定一个场景。当用户看到一张图片，而此时图标又刚好是一个链接地址。用户点击到图片之后，并不能立即判断用户是要打开链接，还是说想观看图片的细节。因此Safari 就等待300毫秒，判断用户是否再次点击了屏幕。这也是会有上述 300 毫秒延迟的主要原因。

由于iPhone的这一成功，许多浏览器厂商开始支持这一功能。但是随着技术的发展，性能的提升。慢慢的出现了混合，web应用在某些场景一开始逐渐替代了原生开发。此时所有的单击事件都有300毫秒延迟，必然是不可接受的，那怎么去解决这个问题呢？

方法一、禁用缩放

既然大家都觉得缩放没有意义，那就提供一个属性去控制它。在HTML文档头部添加如下meta标签

有一个小小的缺点需要说一下，由于图片和文字都是一比一的比例显示的，而且禁用了缩放功能。在某些情况下，需要放大某张图片或者某段文字，就是无法实现图片的双击放大了。(除非js脚本)

方法二、更改默认的视口宽度

还是在HTML文档头部添加如下meta标签

这个方法跟方法一有些许不一样，他将页面的宽度设置成了，与显示屏同宽。需要网站做响应式布局。否则显示效果极易受到影响。还有他没有禁止缩放功能，所以，你可以用双指操作来放大页面。

方法三、CSS touch-action

html {

touch-action: none

}

这是个CSS属性，如果值为 none 的话，就表示禁用掉该元素上的浏览器代理的任何默认行为(缩放，移动，拖拽)，无300ms延迟。你也可以在html标签上面设置该属性，虽然该方法实现了禁用缩放。但是其他的触摸类型交互事件都被禁用了。导致页面无法滚动。

方法四、FastClick.js

熟悉移动端开发的同学，相信都见过这个轻量级库文件。我们引入库文件之后，添加如下代码就可以了。

window.addEventListener( "load", function() {

FastClick.attach( document.body );

}, false );

那FastClick的原理是什么呢？其实就是FastClick在检测到touchend事件之后，会通过 DOM 自定义事件立即触发一个模拟 click 事件，并把浏览器在 300 毫秒之后真正触发的 click 事件阻止掉。

方法五、指针事件的polyfill

现在除了IE，其他大部分浏览器都还不支持指针事件。有一些JS库，可以让我们提前使用指针事件，比如

总结：以上这五种方式基本支持日常的开发需求了，我个人比较推荐使用方法一加方法二，因为我目前所遇到的页面都对移动端做了专门的适应。

其实，关于移动端300ms的延迟问题，还引来一个比较经典的前面面试问题，我们下篇讲解！

移动端300ms延迟_如何解决移动端300ms延迟的问题相关推荐

php mysql主从延迟_如何解决主从数据库同步延迟问题？php连接 mysql 数据库如何添加一个公共的配置文件50...
在上一篇文章中,小编为您详细介绍了关于<图上属标注的什么样元器件?火车购票明明显示无座为什么样乘车后却发现有很多空座>相关知识.本篇中小编将再为您讲解标题如何解决主从数据库同步延迟问题?p ...
远程桌面出现内部错误_如何解决远程桌面连接延迟高的问题？
在对云主机进行日常运维时,我们经常需要使用远程桌面连接,但是传统意义上的远程桌面连接,是由客户端PC直接连接目标服务器,其连接质量的好坏,取决于客户端PC与目标服务器之间的网络带宽与延时,当企业业务范 ...
mysql 主从同步阻塞_如何解决主从数据库同步延迟问题？
题主说的方案感觉非常不靠谱. 不过mysql-proxy本人也几乎没怎么接触,它能否实现上诉功能有些不大确定,即使它有,也不建议为了这个就用它,官网自己都不推荐用到生产环境. 针对主从延迟,本人的经验 ...
如何判断mysql主从延迟_【转】MySQL主从延迟如何解决
一. 如何检测主从延迟html 能够经过监控 show slave status\G 命令输出的Seconds_Behind_Master 参数值来判断,是否存在主从延时. NULLmysql 表示i ...
vue移动端点击事件延迟_去除点击事件300ms延迟（使用了vue之后）
因为习惯用vue了,再回到以前采用获取dom节点来操作的写法就觉得很麻烦. 我在 click 事件里面加了 tapmode 属性,在安卓里面没有300ms的延迟,但是在ios里面就会有这个问题. ...
谷歌pay服务端文档_米大师服务端说明
1.后台接口说明 1.支付后台接口API 1.1 API 1.1.1 查询余额接口 (1)URL地址 [现网]https:// ysdk.qq.com/mpay/get_balance_m [沙箱]h ...
mysql主从同步默认延迟_减少mysql主从数据同步延迟问题的详解
基于局域网的master/slave机制在通常情况下已经可以满足'实时'备份的要求了.如果延迟比较大,就先确认以下几个因素: 1. 网络延迟 2. master负载 3. slave负载一般的做法是 ...
连接游戏服务器网络延迟高,网络延迟_连wifi玩游戏网络延迟高-太平洋IT百科
网络延迟是游戏玩家最不能忍的,为了解决网络延迟的问题,玩家们装了光纤,换了路由,然而"为你我用了半年的积蓄,玩个农药还跳ping."开局两分钟,延迟400ms,网络延迟在王者荣耀中 ...
单侧游离端缺失设计图_单侧游离端附着体义齿的应力中断设计及其力学传导分析...
弹性附着体义齿是一种高效的可摘局部义齿修复形式[,在修复远中游离端缺失时可以显著减少基牙受到的不良扭转力[.然而,由于弹性附着体的缓冲作用,基牙承受的咬牙合力向远中基托转移导致基托下方黏膜组织负担增加 ...

移动端300ms延迟_如何解决移动端300ms延迟的问题

移动端300ms延迟_如何解决移动端300ms延迟的问题相关推荐

最新文章

热门文章