导读:移动端页面的快速相应是 UI 中的重点,试想如果用户点击一按钮等待或者有延迟卡顿,不但会影响体验还会让客户对软件的不喜爱。然而,出于对手指触摸滑动的区分,移动端页面对于触摸事件会有 300 毫秒的延迟,导致多数用户感觉移动设备上基于 HTML 的 web 应用界面响应速度慢。下面就简单的谈谈为什么会有这个延迟和怎么去解决。
300 毫秒延迟的由来:
从查阅的资料来看,是因为苹果在开发初期设计苹果的双击事件会缩小屏幕的比例,回到正常的原始百分比,而不是放大之后的大小,所以在点击的时就会加入300 毫秒的延迟来判断是不是双击触屏(double tap)操作。这个苹果的操作导致影响了众多的手机浏览器厂商,之后再安卓的浏览器里也是会有 300的延迟,所以在安卓手机上如果用的是 click就会产生短暂的延迟而出现白屏或者不流畅。
如何去解决 300延迟:
1、当HTML文档头部包含如下meta标签时:
表明这个页面是不可缩放的,那双击缩放的功能就没有意义了,此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。
这个方案有一个缺点,就是必须通过完全禁用缩放来达到去掉点击延迟的目的,然而完全禁用缩放并不是我们的初衷,我们只是想禁掉默认的双击缩放行为,这样就不用等待300ms来判断当前操作是否是双击。但是通常情况下,我们还是希望页面能通过双指缩放来进行缩放操作,比如放大一张图片,放大一段很小的文字。
2、更改默认的视口宽度:
一开始,为了让桌面站点能在移动端浏览器正常显示,移动端浏览器默认的视口宽度并不等于设备浏览器视窗宽度,而是要比设备浏览器视窗宽度大,通常是980px。我们可以通过以下标签来设置视口宽度为设备宽度。
因为双击缩放主要是用来改善桌面站点在移动端浏览体验的,而随着响应式设计的普及,很多站点都已经对移动端坐过适配和优化了,这个时候就不需要双击缩放了,如果能够识别出一个网站是响应式的网站,那么移动端浏览器就可以自动禁掉默认的双击缩放行为并且去掉300ms的点击延迟。如果设置了上述meta标签,那浏览器就可以认为该网站已经对移动端做过了适配和优化,就无需双击缩放操作了。
这个方案相比方案一的好处在于,它没有完全禁用缩放,而只是禁用了浏览器默认的双击缩放行为,但用户仍然可以通过双指缩放操作来缩放页面
3、使用 Tap点击事件:
和IOS不同,在安卓触屏上,Tap事件和click事件可以同时触发,但click事件会有300 毫秒的延迟,即先触发Tap事件,过一段时间再触发click事件,所以尽可能的使用Tap 事件点击,来快速响应。
4、使用第三方插件库:
这里就推荐用 fastclick.js 有兴趣的朋友可以看一下 【大神谈 fastclick 源码】
FastClick的实现原理是在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后的click事件阻止掉。
参考文档:移动端点击300ms延迟问题和解决
【读fastclick源码有感】彻底解决tap“点透”,提升移动端点击响应速度