将“touchstart”绑定到文档时，Mobile Safari（iPad）滚动性能

Question

我一直在研究在iPad Safari上滚动我的网站时的一些性能问题。我们有一些页面是大table个元素，最多有500行;性能影响肯定似乎与表中的行数有关（并且，在没有这些表的页面上，滚动性能似乎很好）。桌面浏览器非常好。

您可以在以下链接中尝试此操作。 注意：要重新制作，请确保将默认值25 /页面更改为500 /页。 http://www.cellartracker.com/list.asp?table=Notes&iUserOverride=0&T=1000

经过相当多的调试之后，我发现如果我删除任何'touchstart'事件，我会绑定，滚动性能是正常的（并且超速，如预期的那样）。我有一些$(document).on('touchstart', '<selector>', function ()...)个事件被配置为帮助触摸设备访问某些悬停功能。目前，我绑定到$(document)有两个原因：

1. 可能有很多元素与选择器匹配，因此传统上单个委托事件处理程序的性能优于附加到每个元素的500多个处理程序（我只修复了IE8上与此相关的一些性能问题）。 / LI>
2. 一些受影响的元素是通过AJAX加载的，因此如果我绑定到各个元素，那些元素就不会自动获取处理程序。

好的，太棒了 - 我找到了原因 - 但我不知道为什么这只是在有大表的页面上有问题以及如何解决它。对于具有 BOTH 触摸和键盘/鼠标的设备，我希望每个输入机制始终如一地运行（因此if (touch) bind('click') else bind('mouseenter')方法不是我正在寻找的方法）。另外，我还在考虑为某些元素实现Fast Buttons方法，这可能需要绑定到$(document)，因为当前绑定了相应的click处理程序。

那么......关于如何在仍然将touchstart绑定到$(document)的同时改善这些页面上的滚动性能的任何想法？此时HTML非常固定，但如果对DOM进行简单调整会产生很大影响，我会对此持开放态度。

Answer 1

好吧，在把它搁置几天后再做其他事情之后，我回过头来发现性能已经神秘地显着改善了！追溯所做的其他更改，我找到了性能问题的根源： jQuery UI 1.8.20 。我刚刚升级到jQuery UI 1.9.2来解决其他一些问题，现在我不再看到可怕的滚动延迟/性能问题了。

现在，我仍然看到touchstart绑定到$(document)会导致轻微的性能下降，但现在它很小，很难察觉。如果有人对如何更好地优化原始问题有其他指导，我仍然喜欢听到它！

Answer 2

我发现scrollperf降级与DOM的大小成正比。我仍然没有经过足够的测试来判断它是否是DOM节点的数量，嵌套级别，像素数，渲染复杂性等等。可以这么说，当你添加更多的饲料项目时，滚动性能会越来越差。

以下Codepen演示了这一点：

http://codepen.io/ddopson/pen/zgCfj

添加40个左右的Feed项（第一个按钮）并切换'touchstart'事件监听器（第3个按钮），可以清楚地看到在大页面上听取触摸事件的惩罚程度。

我也在尝试解决这个问题，但我还没有找到正确的道路......