FastClick 原理剖析与移动端点击延迟优化实战
爱学习的金静优化前：卡得不行
上个月接手一个老移动端项目，用户反馈点按钮经常没反应，尤其是 iOS 上。我一开始以为是业务逻辑问题，结果自己用真机测了下——好家伙，点个「提交」按钮，手都快戳穿屏幕了，页面才慢悠悠地动一下。不是没反应，是延迟高得离谱。
这种体验在移动端简直致命。用户点完没反馈，下意识再点一次，结果提交了两次订单……客服那边已经炸了。我翻了下代码，发现项目里压根没处理移动端 300ms 的点击延迟问题。这都 2024 年了，居然还在裸奔？
找到瞄颈了！
先确认是不是 300ms 延迟的问题。我打开 Safari 的 Web Inspector，连上 iPhone，录了个 Performance。果然，在 touchstart 到 click 事件之间，硬生生卡了 300 多毫秒。iOS 为了判断用户是不是要双击缩放，故意加了这个延迟。安卓新版本其实早就干掉这玩意儿了，但老机型和 iOS 还是逃不掉。
解决方案无非几个：
- 用
touchend代替click - 加
meta viewport禁用缩放（但影响可访问性） - 上 FastClick
第一种方案看似简单，但坑巨多。比如你点一个按钮，手指稍微滑动了一点，touchend 就不会触发，用户会觉得「点了没反应」。而且还要手动处理冒泡、禁用默认行为，写起来又臭又长。
第二种方案？别想了。产品说「必须支持双指缩放」，直接毙掉。
那就只剩 FastClick 了。虽然它已经几年没更新了，但在解决 300ms 延迟这事上，依然是最稳的方案之一。
核心代码就这几行
FastClick 的用法其实超简单。先装包：
npm install fastclick --save然后在入口文件里挂上：
import FastClick from 'fastclick';
// 挂到 body 上
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', () => {
FastClick.attach(document.body);
}, false);
}搞定。就这么几行，300ms 延迟直接消失。
不过这里有个踩坑提醒：**千万别直接 attach 到 document 或者某个组件内部元素上**。我一开始图省事，attach 到了 React 的 root 节点，结果某些动态加载的按钮还是有延迟。后来查源码才发现，FastClick 是通过监听 touchstart/touchend 来模拟 click 的，如果 attach 的节点不包含目标元素，事件就捕获不到。所以最保险的做法就是 attach 到 document.body。
另外，如果你的项目用了 Vue 或 React，注意别在组件销毁时忘了 detach。虽然 FastClick 内部做了清理，但为了保险，我在 SPA 切换路由时会手动 detach 再重新 attach，避免内存泄漏（虽然实际没遇到过，但老习惯改不掉）。
又踩坑了，表单输入框失焦
上线后第二天，测试跑来说：「iOS 上 input 点一下就失焦，根本没法输入！」我一测，还真是。原来 FastClick 在某些 iOS 版本上会干扰原生 input 的聚焦行为。
翻了下 FastClick 的 issue，发现这是个经典坑。解决方案是在需要原生点击行为的元素上加一个 needsclick 类：
<input type="text" class="needsclick" placeholder="请输入">或者用 data 属性也行：
<input type="text" data-fastclick-needsclick />这样 FastClick 就会跳过这些元素，交给浏览器原生处理。我把项目里所有 input、textarea、select 都加上了这个类，问题解决。
顺便提一嘴，如果你用的是现代框架（比如 Vue 3 + Vite），其实可以考虑用 @vitejs/plugin-react 自带的 clicks: true 配置，或者直接用 pointer-events 相关的 polyfill。但 FastClick 胜在简单、兼容性好，尤其适合老项目快速修复。
性能数据对比
优化前后，我用 Lighthouse 测了几轮（模拟 Moto G4，Slow 4G）：
- 优化前：首次可交互时间（TTI）5.2s，点击响应延迟平均 320ms
- 优化后：TTI 降到 4.8s（这点提升主要是因为减少了重排），但点击响应延迟直接干到 15ms 以内
虽然 TTI 提升不多，但用户体验提升是肉眼可见的。现在点按钮基本是「秒响应」，再也不用担心用户狂点导致重复提交了。
另外，FastClick 本身只有 9KB（gzip 后），对 bundle size 几乎没影响。比自己手写一套 touch 事件处理逻辑靠谱多了。
最后说两句
FastClick 不是银弹，但它在解决移动端点击延迟这个问题上，依然是性价比最高的方案之一。尤其对于还在维护的老项目，加一行代码就能换来流畅体验，何乐不为？
当然，如果你的新项目用的是现代框架（React 18+、Vue 3），并且只支持较新的移动端浏览器，其实可以不用 FastClick。但现实是，很多项目还得兼容 iOS 12、安卓 8 这种老古董，这时候 FastClick 依然是你的救星。
以上是我踩坑后的总结，希望对你有帮助。有更好的方案欢迎评论区交流——比如你们现在都用啥替代 FastClick？我听说有人用 passive event listeners + 自定义 tap 事件，但总觉得太重了。
