一、移动端300ms点击延迟由来

2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。
这当中最出名的，当属双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。
双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢？ 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。 鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。之前人们刚刚接触移动端的页面，在欣喜的时候往往不会care这个300ms的延时问题，可是如今touch端界面如雨后春笋，用户对体验的要求也更高，这300ms带来的卡顿慢慢变得让人难以接受。
也就是说，移动端浏览器会有一些默认的行为，比如双击缩放、双击滚动。这些行为，尤其是双击缩放，主要是为桌面网站在移动端的浏览体验设计的。而在用户对页面进行操作的时候，移动端浏览器会优先判断用户是否要触发默认的行为。
总结：意思就是说，当用户第一次点击移动端屏幕时，浏览器仍然需要等待300ms来判断用户是否存在下一步操作。也就是判断当前操作时单击还是双击。
二、解决方案
一、禁止缩放

<meta name="viewport" content="user-scalable=no">  <!--表示用户无法缩放-->
  <meta name="viewport" content="initial-scale=1,maximum-scale=1">  <!--屏幕初始化缩放缩放比均为1-->

在html代码中添加meta属性，表示完全禁止缩放，此时我们点击一下，就会相应，不会存在300ms延时的问题。如果此时我们想要使用双指进行缩放，也是禁止的，这不是我们想要的。
二、改变默认的视口宽度
一般我们的浏览器的默认窗口大小要大于我们的浏览器实际窗口大小，大概是980px，如果我们设置默认窗口大小等于浏览器大小，此时就不需要进行双击缩放了。

<meta name="viewport" content="width=device-width">

此时比完全禁止缩放要好一点，就是可以进行双指缩放。
三、touch-action
touch-action这样的css样式，可以帮助我们解决浏览器的默认行为的问题，因为我们知道300ms延迟是默认行为。我们可以给指定的元素设置touch-action:none表示可以忽略默认行为，也就是300ms对该元素不生效。
四、FastClick
FastClick事件就是为了解决浏览器300ms延迟的问题，当用户触发touchend事件时，此时会通过DOM自定义事件发出一个click事件，并且会将300ms后的click事件阻止掉。