WEB 移动端 300ms 延迟
2015-12-04 13:17
357 查看
移动端300毫秒延迟是怎么来的呢,又怎么解决呢?
完整版:http://www.linovo.me/front/webapp-300ms.html
简洁版:http://www.xiaomeiti.com/note/3585
一言以蔽之,就是本来只能手机提供了一个双击放大/再双击缩小的功能,然后怎么判断双击呢?那就是点了第一下,然后等300ms,在这300ms内如果又有点击,就是双击,否则该干嘛干嘛。但是这样引发的一个问题是如果一个链接,在用户点击了一次的情况下,要等300ms再跳转,用户就会觉得这页面很卡(实际上延迟100ms用户就能明显感受到。所以我们要解决这个问题。
一、禁止缩放
问题的来源就是页面缩放问题,所以解决方法里就有这个。禁用缩放
一般进行移动开发的时候都会加上这种标签,直接就禁止掉了页面缩放,万事大吉!
二、设置 viewport 的 device-width (chrome 32+)
在 chrome 32+ 中,如果设置了 viewport 的宽度小于或等于物理设备的宽度,那么也会达到禁用缩放的效果。
注意:跟上面不一样
三、利用指针事件(IE10+)
指针事件很多,解决这个问题用这个:
四、tappy.js
https://github.com/filamentgroup/tappy/
存在点透(上面元素的点击事件会被下面的元素接收到,也可以解决)等问题。
很小,只有1kb左右,需要jquery或者能提供类似借口的框架。
五、fastclick.js
https://github.com/ftlabs/fastclick
很流行,很好用。
原声使用:
有jQuery库
有支持AMD模式加载等优点。
完整版:http://www.linovo.me/front/webapp-300ms.html
简洁版:http://www.xiaomeiti.com/note/3585
一言以蔽之,就是本来只能手机提供了一个双击放大/再双击缩小的功能,然后怎么判断双击呢?那就是点了第一下,然后等300ms,在这300ms内如果又有点击,就是双击,否则该干嘛干嘛。但是这样引发的一个问题是如果一个链接,在用户点击了一次的情况下,要等300ms再跳转,用户就会觉得这页面很卡(实际上延迟100ms用户就能明显感受到。所以我们要解决这个问题。
一、禁止缩放
问题的来源就是页面缩放问题,所以解决方法里就有这个。禁用缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
一般进行移动开发的时候都会加上这种标签,直接就禁止掉了页面缩放,万事大吉!
二、设置 viewport 的 device-width (chrome 32+)
在 chrome 32+ 中,如果设置了 viewport 的宽度小于或等于物理设备的宽度,那么也会达到禁用缩放的效果。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3">
注意:跟上面不一样
三、利用指针事件(IE10+)
指针事件很多,解决这个问题用这个:
selector { -ms-touch-action: manipulation; /* IE10 */ touch-action: manipulation; /* IE11+ */ }
四、tappy.js
https://github.com/filamentgroup/tappy/
存在点透(上面元素的点击事件会被下面的元素接收到,也可以解决)等问题。
很小,只有1kb左右,需要jquery或者能提供类似借口的框架。
$( "a.my-link" ).bind( "tap", function( e ){ alert( "tap!" ); });
五、fastclick.js
https://github.com/ftlabs/fastclick
很流行,很好用。
原声使用:
if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); }
有jQuery库
$(function() { FastClick.attach(document.body); });
有支持AMD模式加载等优点。
相关文章推荐
- 《从零开始学Swift》学习笔记(Day 44)——重写属性
- open source Swift, Objective-C and the next 20 years of development
- 【常用工具类】Activity管理工具类AppManager
- Bmob支付
- ApplicationContext继承图
- ios 出现 application windows are expected to have a root view controller 错误解决方法
- 创建第一个android应用
- Android 多态知识使用实例(一)
- Android4.0-Fragment框架实现方式剖析(一)
- 【转】Android Studio Essential Training
- Genymotion强大好用高性能的Android模拟器(在电脑流畅运行APK安卓软件游戏的利器)
- android下拉菜单 spinner 学习
- android studio 更新 Gradle错误解决方法
- 不通过App Store实现ios应用分发下载安装
- iOS通知的介绍
- iOS-调试技巧
- iOS 获取当前Wifi的 名称 SSID
- unity NGUI tutorial more events
- iOS常用手势识别器
- iOS常用手势识别器