移动端延迟300ms的来源和点击穿透以及解决方案

300ms延迟产生的原因

移动端延迟200-300ms的主要来源是由于浏览器为了实现双击缩放（double tap to zoom）功能而引入的点击延迟。在双击缩放的场景下，浏览器需要等待一段时间来判断这次点击是否为双击操作，如果不是则执行单击操作。这段时间就是点击延迟（click delay）。

点击延迟的引入是为了解决在移动设备上双击缩放和单击操作的冲突问题。由于双击缩放的操作频率较低，因此在单击操作中引入了点击延迟，以区分单击和双击事件。但是，这也导致了用户在点击按钮等操作时会感觉到明显的延迟。

解决这个问题的方法有很多，其中比较常用的方法是：

方案一：使用CSS属性touch-action: manipulation来禁用双击缩放。这个属性告诉浏览器在处理触摸事件时不要执行任何默认行为，因此可以避免点击延迟。

通过设置 touch-action: manipulation 属性，可以禁用这个默认的行为。具体实现方法如下：

1.在需要禁用双击缩放的元素上添加 touch-action: manipulation 属性

div {
  touch-action: manipulation;
}

 2.如果需要禁用整个页面的双击缩放，则可以在 body 元素上设置该属性

body {
  touch-action: manipulation;
}

需要注意的是，禁用双击缩放可能会影响到一些需要使用双击的操作，例如双击输入框选中文本、双击地图放大等。 

方案二：使用meta标签<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">来禁用缩放功能。这个标签告诉浏览器不要允许用户缩放页面，也可以避免点击延迟。

通过设置 <meta> 标签中的 user-scalable 属性为 no，可以禁用用户对页面的缩放操作。同时，设置 initial-scale 和 maximum-scale 属性为 1，可以确保页面在加载时不会自动缩放。最后，设置 width 属性为 device-width，可以让页面的宽度自适应移动设备的屏幕宽度。具体实现方法如下：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

需要注意的是，禁用缩放功能可能会影响到用户的体验，因为用户可能无法放大或缩小页面以便更好地查看内容。

方案三：使用fastclick.js库来解决点击延迟问题。这个库使用了一些技巧来模拟点击事件，从而避免了点击延迟。

FastClick是一个JavaScript库，用于消除移动设备上浏览器默认的 300 毫秒点击延迟，从而使应用程序的响应速度更快。同时，FastClick 还可以解决点击穿透问题。

在使用FastClick解决点击穿透问题之前，我们需要先了解点击穿透问题是什么。点击穿透问题是指在移动设备上，当一个元素的点击事件被触发后，浏览器会在 300 毫秒后才会触发对该元素的点击事件，而在这 300 毫秒内，如果用户快速点击了其他元素，那么这些元素的点击事件也会被触发。这种现象被称为点击穿透问题。

要解决点击穿透问题，可以使用FastClick库来消除浏览器默认的 300 毫秒点击延迟，并在元素的点击事件被触发时阻止事件冒泡。具体操作如下：

1.下载并引入FastClick库

<script src="fastclick.js"></script>

2.在页面加载完成后初始化FastClick

window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);

3.在元素的点击事件处理函数中调用 preventDefault 方法来阻止事件冒泡

element.addEventListener('click', function(event) {
    event.preventDefault();
    // 处理点击事件
}, false);

以上操作可以使点击事件立即触发，避免点击穿透问题的出现。

需要注意的是，FastClick并不是完美的解决方案，它可能会导致一些其他的问题。在实际使用中，应该根据具体情况进行选择。