改善大型桌面上的iScroll性能

Question

我正在根据用户如何滚动以保持它们对齐来以编程方式更新表头及其第一列位置.

我遇到的问题是,只要我的数据集足够大,滚动就会变得越来越不稳定/不太平滑.

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

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!它可以处理数以十万计的行和建正是为了这个目的.

你问,它是如何工作的？

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

Answer 2

这不会是您正在寻找的答案，但无论如何，这是我的 2 美分。

Javascript 动画（特别是考虑到 DOM 必须渲染的数量）永远不会像您想要的那样平滑。即使您可以在自己的计算机上顺利运行，但在其他人（较旧的 PC、浏览器等）上它可能会出现巨大差异。

如果我自己解决这个问题，我会看到两个选择。

1. 走老路，添加水平和垂直滚动条。我知道这不是一个很好的解决方案，但效果很好。

2. 仅渲染一定数量的行并丢弃屏幕外的行。这可能有点复杂，但本质上您会渲染 10 行。一旦用户滚动到第 11 个应该在那里的位置，渲染该位置并删除第 1 个。您可以根据需要将它们弹出和弹出。

就实际的 JS 而言（您提到将元素放入数组中），这没有帮助。实际的不稳定是由于浏览器首先需要渲染这么多元素。