Question

在Chrome上，我的系统中element.addEventListener("touchstart")的性能出现严重问题，在某些情况下，单次通话时达到100毫秒。

r00122 listen touchstart: 60.000ms
r00123 listen touchstart: 61.000ms
r00124 listen touchstart: 61.000ms

以上是纯console.time来电的addEventListener输出。对其他事件的相同调用需要0ms。有趣的是，每一次或两次通话所花费的时间都会增加另一个ms。当我打开或关闭“模拟触摸事件”时没有区别。

但是，Chrome上的简单测试用例运行时间为0.01毫秒/秒，因此必须存在其他依赖性。我想不出它是什么，除了我在页面上有大量元素并设置了许多事件监听器（1000）的事实。但是，在我关于Mozilla和Safari的页面中，这个电话是即时的。到底是什么原因可以说明这一点？

Answer 1

我遇到了将侦听器插入超过1,000个元素的相同行为，实际上只在桌面上的Chrome中。我认为这是Chrome中的一个错误，并创建了以下两步解决方法。

检查客户端是否支持触摸事件;如果没有，那么就不要注册。我用来检查触摸支持的代码基于this answer：

var bTouchEnabled = 'ontouchstart' in window ||
('onmsgesturechange' in window &&
 'msMaxTouchPoints' in window.navigator &&
  window.navigator.msMaxTouchPoints);

不要一次注册所有元素，但缓冲注册：寄存器50，调用setTimeout()延迟，例如20 ms，注册下一个50，重复。

结合这两种技术帮助我大大提高了脚本的性能并避免了用户代理冻结。它仍然是一种解决方法，但检查触摸事件的存在似乎在语义上是正确的。

element.addEventListener（“touchstart”）的性能极慢

1 个答案: