将“touchstart”绑定到文档时的移动 Safari (iPad) 滚动性能

Question

我一直在调查在 iPad Safari 上滚动我的网站时出现的一些性能问题。我们有一些页面很大 table 元素，最多 500 行；性能影响似乎与表中的行数有关（并且，在没有此类表的页面上，滚动性能似乎很好）。桌面浏览器非常好。

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

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

1. 可以有很多元素匹配选择器，因此传统上单个委托事件处理程序的性能优于每个元素附加 500 多个处理程序（我刚刚在 IE8 上修复了一些与此相关的性能问题）。
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 个左右的提要项（第一个按钮）并切换“touchstart”事件侦听器（第三个按钮）可以清楚地看出在大页面上侦听触摸事件的惩罚有多严重。

我也在尝试解决这个问题，但是我还没有理清正确的路径……