javascript - 提高大表上的 iScroll 性能

Question

我正在根据用户滚动的方式以编程方式更新表格标题及其第一列位置以保持它们对齐。

我遇到的问题是，一旦我的数据集变得足够大，滚动就会变得越来越不稳定/不那么流畅。

相关代码在 fiddle 的最底部:

iScroll.on('scroll', function(){
    var pos = $('#scroller').position();
    $('#pos').text('pos.left=' + pos.left + ' pos.top=' + pos.top);

    // code to hold first row and first column
    $('#scroller th:nth-child(1)').css({top: (-pos.top), left: (-pos.left), position:'relative'});
    $('#scroller th:nth-child(n+1)').css({top: (-pos.top), position:'relative'});

    // this seems to be the most expensive operation:
    $('#scroller td:nth-child(1)').css({left: (-pos.left), position:'relative'});
});

我知道这可以通过缓存元素等来写得更有效。例如，我尝试将元素保存到数组中并以更“普通”的方式更新它们的位置:

headerElements[i].style.left = left + 'px'; // etc...

无论我进行回调的速度有多快，我仍然对结果不满意。你有什么建议吗？

https://jsfiddle.net/0qv1kjac/16/

Answer 1

只需使用 ClusterizeJS !它可以处理数十万行，正是为此目的构建的。

你问它是如何工作的？

The main idea is not to pollute DOM with all used tags. Instead of that - it splits the list to clusters, then shows elements for current scroll position and adds extra rows to top and bottom of the list to emulate full height of table so that browser shows scrollbar as for full list