改善大型桌面上的iScroll性能 [英] Improving iScroll performance on a large table

问题描述

我正在以编程方式更新表头及其第一列位置，具体取决于用户如何滚动以保持对齐。

I'm updating a table header and its first column positions programatically based on how the user scrolls around to keep them aligned.

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

The issue I'm experiencing is that as soon as my data sets gets big enough, the scrolling gets more and more choppy/less smooth.

相关代码位于小提琴的最底层：

The relevant code is at the very bottom of the 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'});
});

我知道通过缓存元素等可以写得更有效率。例如，我尝试将元素保存到数组中并以更流行的方式更新其位置：

I know that this can be written a lot more efficent by caching the elements and so on. For example, I have tried saving the elements in to an array and updating their position in a more "vanilla" fashion:

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

无论我多快地进行回调，我仍然不开心关于结果。你有什么建议吗？

No matter how fast I make the callback, I'm still not happy about the result. Do you have any suggestions?

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

推荐答案

只需使用 ClusterizeJS ！它可以处理数十万行，并为此目的构建完全。

Just use ClusterizeJS! It can handle hundreds of thousands of rows and was built exactly for this purpose.

你问这是怎么回事？

主要思想不是使用所有使用的标签污染DOM。而不是 - 它将列表拆分为集群，然后显示当前滚动位置的元素，并在列表的顶部和底部添加额外的行以模拟表的完整高度，以便浏览器显示滚动条和完整列表

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

这篇关于改善大型桌面上的iScroll性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！