2

我一直在调查在 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 加载的，因此如果我绑定到单个元素，这些元素不会自动获取处理程序。

好的，太好了——我找到了原因——但我不知道为什么这只是在带有大表的页面上出现的问题以及如何解决它。对于同时具有触摸和键盘/鼠标的设备，我希望每个输入机制都能一致地运行（所以这种if (touch) bind('click') else bind('mouseenter')方法不是我想要的）。另外，我还在考虑为某些元素实现快速按钮方法，这可能需要绑定到当前绑定$(document)相应处理程序的位置。click

那么......关于如何提高这些页面上的滚动性能同时仍将 touchstart 绑定到的任何想法$(document)？HTML 在这一点上是相当固定的，但是如果对 DOM 有一些简单的调整会产生很大的影响，我愿意接受它。

4

2 回答 2

4

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

touchstart现在，我仍然看到绑定到的性能略有下降$(document)，但现在它是如此轻微以至于几乎无法察觉。不过，如果有人对如何更好地优化原始问题有其他指导，我仍然很想听听！

于 2012-12-18T22:39:23.093 回答
0

我发现 scrollperf 的降级与 DOM 的大小成正比。我还没有进行足够的测试来确定它是 DOM 节点的数量、嵌套级别、像素数、渲染复杂性还是其他什么。可以这么说，随着您添加更多的提要项目，滚动性能变得越来越差。

以下 Codepen 演示了这一点：

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

添加大约 40 个提要项（第一个按钮）并切换“touchstart”事件侦听器（第三个按钮）可以清楚地看出在大页面上侦听触摸事件的惩罚有多严重。

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

于 2013-03-06T01:01:17.793 回答