2

在 Chrome 上，我的系统的性能出现了严重问题element.addEventListener("touchstart")，在某些情况下，一次调用会达到 100 毫秒。

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

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

但是，Chrome 上的一个简单测试用例以 0.01ms/call 的速度运行，因此必须存在其他一些依赖关系。我想不出它是什么，除了我在页面上有大量元素并且正在设置许多事件侦听器（1000）之外。但是，在我关于 Mozilla 和 Safari 的页面中，调用是即时的。到底是什么原因造成的？

4

1 回答 1

1

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

  1. 检查客户端是否支持触摸事件；如果没有，则不要注册。我用来检查触摸支持的代码基于这个答案：

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

  2. 不要一次注册所有元素，而是缓冲注册：寄存器 50，setTimeout()以 20 ms 的延迟调用 a，它会注册下一个 50，重复。

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

于 2013-06-03T15:08:39.823 回答