將'touchstart'綁定到文檔時，移動Safari（iPad）的滾動性能

Question

我一直在研究在iPad Safari上滾動我的網站時出現的一些性能問題。我們有一些頁面，這些頁面最多可以包含500行，大小爲table;性能影響肯定與表中的行數有關（並且在沒有這種表的頁面上，滾動性能看起來很好）。桌面瀏覽器非常好。

你可以在下面的鏈接試試看。 注意：要重現，請確保將默認值25 /頁更改爲500 /頁。 http://www.cellartracker.com/list.asp?table=Notes&iUserOverride=0&T=1000

相當做了一些調試後，我發現，如果我刪除我約束的任何「touchstart」事件，滾動性能是正常的（和超快速，符合市場預期）。我有幾個$(document).on('touchstart', '<selector>', function()...)事件配置爲協助使觸摸設備可以使用某些懸浮功能。目前，我結合$(document)的原因有兩個：

1. 可以有很多選擇相匹配的元素，所以傳統的單一委託的事件處理程序的性能是連接到每個元素優於500+處理器（我只是在IE8上修正了一些與此相關的性能問題）。
2. 某些受影響的元素通過AJAX加載，所以如果綁定到單個元素，那些元素將不會自動獲取處理程序。

OK，偉大的 - 從來就找到了原因 - 但我不知道爲什麼這是一個問題只與大表和如何解決它的網頁。對於具有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來解決一些其他問題，現在我不再看到可怕的滾動滯後/ perf問題。

現在，我仍然看到touchstart綁定到$(document)，但是現在它還是很小，它是相當難以察覺的。如果任何人有關於如何更好地優化原始問題的其他指導，但是，我仍然喜歡聽到它！

Answer 2

我發現scrollperf的退化與DOM的大小成正比。我仍然沒有足夠的測試來確定它是否是DOM節點的數量，嵌套級別，像素數量，渲染複雜度或其他。只要說，當你添加更多的飼料項目時，滾動性能越來越差。

以下Codepen說明了這一點：

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

增加40個左右的飼料項目（第一個按鈕）和切換「touchstart」事件監聽器（第三按鈕）使得它發自內心清楚是多麼陡峭的處罰用於在大頁面上監聽觸摸事件。

我也想解決這個問題，但我還沒有整理出正確的道路，只是還沒有...