触摸事件全面解析从前端开发者的实战经验谈
Good“东成优化前：卡得不行
最近在做一个移动端的项目，页面上有一个需要大量滚动和拖动的列表。一开始没怎么注意性能问题，结果上线后用户反馈说页面卡得不行，特别是在低端手机上，滑动列表时简直像是在玩幻灯片。这让我非常头疼，因为用户体验实在太差了。
找到瘼颈了！
首先，我用了一些工具来定位问题。Chrome DevTools 的 Performance 面板帮我找到了瓶颈所在。我发现主要问题出在 TouchEvent 处理上，特别是 touchmove 事件。每次用户滑动时，触发了大量的 touchmove 事件，导致页面重绘和重排版非常频繁，CPU 使用率飙升。
为了更直观地看到问题，我还用了 Lighthouse 进行了一次全面的性能评估。结果显示，页面的 FPS（帧率）非常低，尤其是在一些复杂的动画和过渡效果下，掉帧现象非常明显。
优化方法：试了几种方案
确定了问题之后，我就开始尝试各种优化方案。试了好几种方法，最后发现以下几种方案效果最好。
1. 减少不必要的 DOM 操作
优化前的代码中，每次 touchmove 事件触发时，都会重新计算并更新大量的 DOM 元素。这种频繁的 DOM 操作对性能影响非常大。我决定将这些操作移到 touchend 事件中，只在用户停止滑动时进行更新。
优化前的代码：
document.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
const x = touch.clientX;
const y = touch.clientY;
// 更新 DOM 元素
updateDOMElements(x, y);
});
function updateDOMElements(x, y) {
// 一系列 DOM 操作
}优化后的代码：
let lastX, lastY;
document.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
lastX = touch.clientX;
lastY = touch.clientY;
});
document.addEventListener('touchend', () => {
if (lastX !== undefined && lastY !== undefined) {
updateDOMElements(lastX, lastY);
}
});
function updateDOMElements(x, y) {
// 一系列 DOM 操作
}2. 使用 requestAnimationFrame
另一个优化点是使用 requestAnimationFrame 来控制动画帧。这样可以确保 DOM 更新在浏览器的下一帧中进行，避免了频繁的重绘和重排版。
优化前的代码：
document.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
const x = touch.clientX;
const y = touch.clientY;
// 更新 DOM 元素
updateDOMElements(x, y);
});优化后的代码：
let lastX, lastY;
document.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
lastX = touch.clientX;
lastY = touch.clientY;
requestAnimationFrame(() => {
if (lastX !== undefined && lastY !== undefined) {
updateDOMElements(lastX, lastY);
}
});
});
function updateDOMElements(x, y) {
// 一系列 DOM 操作
}3. 限制 touchmove 事件频率
有时候，用户滑动速度非常快，触发了大量的 touchmove 事件。可以通过限制事件频率来减少 CPU 的负担。我使用了一个简单的防抖函数来实现这一点。
优化前的代码：
document.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
const x = touch.clientX;
const y = touch.clientY;
// 更新 DOM 元素
updateDOMElements(x, y);
});优化后的代码：
let debounceTimeout;
document.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
const x = touch.clientX;
const y = touch.clientY;
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() => {
updateDOMElements(x, y);
}, 100); // 100ms 延迟
});
function updateDOMElements(x, y) {
// 一系列 DOM 操作
}优化后：流畅多了
经过以上几个优化方案的实施，页面的性能有了显著的提升。加载时间从原来的5秒左右降到了800毫秒，FPS 也稳定在60帧左右，用户反馈说滑动体验好了很多。
具体的数据对比如下：
- 优化前：加载时间 5s，FPS 30-40
- 优化后：加载时间 800ms，FPS 60
踩坑提醒：这三点一定注意
在优化过程中，我也踩了不少坑，这里总结一下：
- 不要过度优化。有时候，优化可能会引入新的问题，比如防抖函数的延迟设置过长会导致用户感知到明显的延迟。找到一个平衡点很重要。
- 测试一定要充分。不同的设备和浏览器表现可能不一样，要多做测试，确保优化方案在各种环境下都能正常工作。
- 考虑可维护性。优化后的代码要保持清晰易懂，不要为了追求性能而牺牲代码的可读性和可维护性。
结尾
以上就是我在优化 TouchEvent 性能方面的一些经验分享。希望对你有所帮助。如果大家有更好的方案或建议，欢迎在评论区交流。这个技巧的拓展用法还有很多，后续我会继续分享这类博客。
