每日一练 解决vue 300ms延时问题

         个人工作原因好长时间没学习了，如今以项目实战练习开始学习新知识，优化过程中遇到的一个比较熟悉的问题就是解决苹果手机点击时间延时问题，因为有人一直在说，我一个这么好的苹果，用软件你让我用出了1000块钱的安卓手机的感觉，归根到底就是点击相应时间有点长，给人一种卡顿的问题，网上的解决方法有很多种，比如禁止缩放等meta处理方式。

当然，我是做Hybrid App的，一般的网页缩放什么的都是天然关闭的所以也就不用管了，这里我贴出meta的配置方法。

       <meta charset="utf-8">
       <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
       <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

接下来就开始做VUE的处理操作了。

从网上了解到移动端解决延时问题比较好的是fastclick.js这个JS，所以绕了点路把问题解决了。

1、首先是下载JS然后引用到项目中

2、接下来就是引用操作了，在页面中引用之后，VUE的生命周期中有一个created属性，我们需要把引用的方法放到这个方法中。

官方给出的引用方法如下：

	if ('addEventListener' in document) {
    		document.addEventListener('DOMContentLoaded', function() {
        		FastClick.attach(document.body);
   		 }, false);
	}

但是在引用之后不能避免延时问题，点击事件和触摸事件的时间差距还是很大。

所以我们需要简单一点

直接把里面的一句话引入进去

	FastClick.attach(document.body);

这样的话就基本上消除了点击延时的效果了。

效果如图：

这是点击的毫秒的差距，基本上在30左右，上面的时间为body标签的ontouchstart事件的时间

下面的为点击按钮的触发时间，基本就流畅了。

书写方法如下：

	var vm = new Vue({
		el: "#gongge",
		data:{},
			created: function(){
				
				FastClick.attach(document.body);
					
				},
				methods:{
					openwin: function(event){
						console.log("点击=" + new Date().getTime());
					}
				}
			});