Vue-使用fastclick解决移动端300毫秒延迟

开始之前

快速响应是所有 UI 实现的重中之重。当延迟超过 100 毫秒，用户能感受到界面的卡顿。 出于对手指触摸滑动的区分，移动端页面对于触摸事件会有 300 毫秒的延迟，导致多数用户感觉移动设备上基于 HTML 的 web 应用界面响应速度慢。 本文主要讨论上述延时的来历，浏览器生产商的考虑，以及我们作为开发者，当前应该如何处理这个问题。

 

追溯300毫秒的历史

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

这当中最出名的，当属双击缩放(double tap to zoom)。这也是会有上述 300 毫秒延迟的主要原因，牛逼了！！

接下来直接步入正题,那么我问应该如何解决这个用户体验的的重要细节呢？在这里个人比较推荐使用FastClick来解决，官网地址:https://labs.ft.com/fastclick/

我们的日常开发中有两种模式会用到，其一是通过浏览器引入，其二是在Vue项目中使用，操作实力 如下:

 

Vue中使用FastClick

1.git或者cmd在项目中执行命令:

npm i fastclick --save

2.在入口main.js中引入并初始化挂载

import FastClick from 'fastclick
FastClick.attach(document.body)

 

浏览器中使用FastClick

1.引入

2.初始化FastClick

if ('addEventListener' in document) {

        document.addEventListener('DOMContentLoaded', function() {

            FastClick.attach(document.body);

        }, false);

    }