移动端300ms延迟_移动端300ms延迟原因及解决方案

移动端300ms延迟原因

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

双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。双击缩放，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者单击跳转的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。

鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。

解决方案

原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉

缺点: 脚本相对较大, 不建议使用

2. 禁用游览器缩放

当HTML文档头部包含如下meta标签时：

表明这个页面是不可缩放的，那双击缩放的功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。

这个方案有一个缺点，就是必须通过完全禁用缩放来达到去掉点击延迟的目的，然而完全禁用缩放并不是我们的初衷，我们只是想禁掉默认的双击缩放行为，这样就不用等待300ms来判断当前操作是否是双击。但是通常情况下，我们还是希望页面能通过双指缩放来进行缩放操作，比如放大一张图片，放大一段很小的文字。

3. 更改默认的视口宽度

一开始，因为双击缩放主要是用来改善桌面站点在移动端浏览体验的。随着发展现在都是专门为移动开发专门的站点，这个时候就不需要双击缩放了，所以移动端浏览器就可以自动禁掉默认的双击缩放行为并且去掉300ms的点击延迟。如果设置了上述meta标签，那浏览器就可以认为该网站已经对移动端做过了适配和优化，就无需双击缩放操作了。

这个方案相比方案一的好处在于，它没有完全禁用缩放，而只是禁用了浏览器默认的双击缩放行为，但用户仍然可以通过双指缩放操作来缩放页面。

4.通过 touchstart 和 touchend模拟实现

能不能直接用touchstart代替click呢，

答案是不能，使用touchstart去代替click事件有两个不好的地方。

第一：touchstart是手指触摸屏幕就触发，有时候用户只是想滑动屏幕，却触发了touchstart事件，这不是我们想要的结果；

第二：使用touchstart事件在某些场景下可能会出现点击穿透的现象。

什么是点击穿透？

假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素，B元素被隐藏了，随后，A元素触发了click事件。

这是因为在移动端浏览器，事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟，当touchstart事件把B元素隐藏之后，隔了300ms，浏览器触发了click事件，但是此时B元素不见了，所以该事件被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。

移动端300ms延迟_移动端300ms延迟原因及解决方案相关推荐

js移动端调试控制台_移动端js调试工具：eruda
通常写前端页面都在Chrome浏览器的开发模式下进行调试,但是写放在移动端的H5页面时,有时候会遇到在Chrome上调试没有问题,但是在手机的浏览器上有问题的情况:或者有些功能只能在特定的容器中才能其 ...
kafka消息消费有延迟_简易实现kafka延迟消息
背景当前业务存在以下场景:在一个事务内的最后一步是发送kafka消息,消费端收到通知后读取数据并做处理.但是由于kafka几乎是即时收到消息,导致偶尔出现"在发完kafka和提交事务的间隙 ...
ui设计移动端字体适配_移动端UI设计规范全方位汇总(附演示PPT下载）
很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,对做UI设计的基础概念也没有清晰的认识,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页 ...
什么是端到端训练测试_为什么端到端测试对您的团队很重要
什么是端到端训练测试 by Phong Huynh 由Phong Huynh 为什么端到端测试对您的团队很重要 (Why End-to-End Testing is Important for You ...
移动端web设计尺寸_移动端页面设计规范尺寸大起底
移动端尺寸繁多,包括IOS和安卓,尺寸多达十余种,所以移动页面尺寸的适配一直是前端和设计的头疼.今天来总结一下当前市场上的一些移动端尺寸,方便设计师和前端去考虑适配.但是最好还是针对自己的产品做调查, ...
bootstrap怎么在移动端横向布局_移动端筛选中的「不限」到底该怎么用
移动端筛选再常见不过了-- 我们在租房时,对于户型.朝向都要要求时会用到多项筛选:我们在找工作时,对薪资和工作经验也会做多项筛选的限制下图所示的就是比较常见的移动端多项筛选样式: 那么在工 ...
移动端web设计尺寸_移动端H5页面的设计稿尺寸大小规范
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿 ...
ui设计移动端字体适配_移动端UI界面设计：APP字体排版设计的七个原则
再来谈移动端APP字体排版设计,也许有人会说,这个还有什么好说的呢?但是真正能够运用好APP字体设计的人还真的不多.不信,我们往下看看这个7个移动端字体设计原则吧! 1. 留足空间与普遍观点恰好相反 ...
ui设计移动端字体适配_移动端字体ui设计移动端界面设计规范
做字体设计和图标设计,应该攻读什么专业? UI设计需要学习几个月能找工作? 您好:关于需要学习几个月才能找到一份工作,我的理解和建议如下: 1?由于UI只是设计者手中的一个工具,它是表达内部设计思想的 ...
移动端web设计尺寸_移动端H5页面的设计稿尺寸（上）
由于HTML5和微信内置浏览器的火爆,移动端H5网页越发流行.在设计制作移动端网页的时候,你是否疑惑,这种网站设计稿应该做成的多少屏宽,是否应该跟手机的分辨率一致,还是应该按照iPhone的分辨率来设 ...

移动端300ms延迟_移动端300ms延迟原因及解决方案

移动端300ms延迟_移动端300ms延迟原因及解决方案相关推荐

最新文章

热门文章