移动端300ms延时的原因? 如何处理?
Posted kitebear
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端300ms延时的原因? 如何处理?相关的知识，希望对你有一定的参考价值。
移动端300毫秒的延迟是由于双击缩放（double tap to zoom）机制引起的。当用户在移动设备上轻触屏幕时，浏览器会等待300毫秒，以确定用户是否要进行双击缩放。
为了解决这个问题，有以下几种常见的方法：
- 使用meta标签禁用缩放功能
<meta name="viewport" content="width=device-width, user-scalable=no">
这样一来，就可以禁用移动端浏览器的缩放功能，从而解决300毫秒的问题。不过需要注意的是，这样会影响到一些移动设备下的用户体验，应该谨慎使用。
- 使用FastClick库
FastClick 是一个JavaScript库，用于解决移动端浏览器的 300ms 延迟问题。它会通过检测用户的操作来模拟点击事件，并且能够处理移动设备的 touch 事件，从而提高点击响应速度。使用方法如下：
<script src="fastclick.js"></script>
<script>
if (\'addEventListener\' in document)
document.addEventListener(\'DOMContentLoaded\', function()
FastClick.attach(document.body);
, false);
</script>
因为有一些浏览器可能会对void(0)进行语法分析或执行，使其变得低效。所以更好的方法是使用#。
<!-- 原写法 -->
<a href="javascript:;"></a>
<!-- 推荐写法 -->
<a href="#"></a>
- 使用touch事件代替click事件
移动设备支持touch事件，可以通过touchstart和touchend事件来模拟click事件，从而减少点击延迟。不过需要注意的是，touch事件有时候还是会有延迟，不适合所有的场景使用。
以上方法都可以减少或避免移动端点击延迟问题，可以根据自己的需求选择适合的解决方案。
fastclick.js --- 解决移动端点击事件300ms延时
Fast Click 是一个简单、易用的库，专为消除移动端浏览器从物理触摸到触发点击事件之间的300ms延时。
为什么会存在延迟呢？
从你触摸按钮到触发点击事件，移动端浏览器会等待接近300ms，原因是浏览器会等待以确定你是否执行双击事件
兼容性
Mobile Safari on iOS 3 and upwards
Chrome on iOS 5 and upwards
Chrome on Android (ICS)
Opera Mobile 11.5 and upwards
Android Browser since Android 2
PlayBook OS 1 and upwards
何时不需要使用
1、FastClick 不会伴随监听任何桌面浏览器
2、Android 系统中，在头部 meta 中设置 width=device-width 的Chrome32+ 浏览器不存在300ms 延时，所以，也不需要
<meta name="viewport" content="width=device-width, initial-scale=1">
3、同样的情况也适用于 Android设备（任何版本），在viewport 中设置 user-scalable=no，但这样就禁止缩放网页了
4、IE11+ 浏览器中，你可以使用 touch-action: manipulation; 禁止通过双击来放大一些元素（比如：链接和按钮）。IE10可以使用 -ms-touch-action: manipulation
使用方法
在 HTML 页面中引入 fastclick.js
<script type=‘application/javascript‘ src=‘/path/to/fastclick.js‘></script>
script 文件必须在页面元素 实例化 FastClick 之前加载
在 body 上实例化 FastClick ，推荐按照如下方法使用：
if (‘addEventListener‘ in document) {
document.addEventListener(‘DOMContentLoaded‘, function() {
FastClick.attach(document.body);
}, false);
}如果你使用的是 jQuery
$(function() {
FastClick.attach(document.body);
});如果你使用的是 Browserify 或其他 CommonJS 风格的模块系统，FastClick.attach 方法会在你调用 require(‘fastclick‘) 之后返回。所以，使用 FastClick 最简单的方法如下：
var attachFastClick = require(‘fastclick‘); attachFastClick(document.body);
示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
a{
text-decoration: none;
color:black;
}
</style>
</head>
<body>
<a href="#">链接</a>
<script src="resources/js/jquery-1.8.3.min.js"></script>
<script src="resources/js/fastclick.js"></script>
<script>
$(function() {
FastClick.attach(document.body);
});
$(‘a‘).click(function(e){
e.preventDefault();
$(this).css(‘color‘,‘red‘);
});
</script>
</body>
</html>通过手机来运行这段代码，使用FastCick事件，可以很明显看到，点击链接文字变红时没有了闪烁效果
Github地址：https://github.com/ftlabs/fastclick
本文出自 “dapengtalk” 博客，请务必保留此出处http://dapengtalk.blog.51cto.com/11549574/1886507
以上是关于移动端300ms延时的原因? 如何处理?的主要内容，如果未能解决你的问题，请参考以下文章