javascript - React.js 排序大数组

Question

我已经基于这个 React library 实现了 react/js 排序网格

一切都很好，但是当数组中的对象超过 50k 时，我的响应速度越来越慢。超过 50k 大约需要 4 秒。超过 250k 需要 10 秒。

我没有复杂的数据结构，这就是我有的:

var myData = [{name: "my name", description: "my description", grade: 3}]

我正在使用 sorty为了这个任务。我是否达到了技术的限制，或者我做错了什么？

我知道这不可能是即时的，我只是想尽可能地提高速度。感谢任何见解。

经过大量试验，我决定先尝试使用下划线进行排序，然后再尝试制作自己的排序函数。

if (SORT_INFO.dir === -1){
        var data =  _.sortBy( this.state.data, SORT_INFO.name ).reverse();
    } else {
        var data =  _.sortBy( this.state.data, SORT_INFO.name );
    }

令我吃惊的是它的速度。大约是10倍。数组中的 100 万个对象，可能需要 4 秒。我想知道为什么？

Answer 1

Have I reached a limitation of the technology [...] ?

从某种意义上说，是的。如果您的数据集足够大(特别是如果元素是通过比较排序的)，排序通常是一项昂贵的任务，需要大量的计算能力。无论您优化多少，对数十万个元素进行排序——尤其是在浏览器中——几乎总是会花费大量时间，有效地卡住 UI 一两秒钟。 p>

但是，执行同步 CPU(或 IO)密集型任务可以卸载到 Web Workers 中，这使您可以在不锁定 UI 的情况下处理数字。

服用 this example ，它会是这样的:

component.js(x)

handleSortChange: function (sortInfo) {
    var sortWorker = new Worker("sortWorker.js");
    SORT_INFO = sortInfo
    data = [].concat(data1000)

    sortWorker.postMessage(data);
    sortWorker.onmessage = function (e) {
        var sortedData = e.data;
        this.setState({});
    }
}

sortWorker.js

onmessage = function (e) {
    postMessage(sort(e.data));
}

这种方式需要关注的一件事是用户何时触发排序功能。您可以在工作人员完成之前禁止接受排序请求，并显示加载/工作指示器。

对如此长且连续的数据列表进行排序需要一些时间，但如果向用户显示一个指示器让他/她知道这是一个漫长的过程而不阻塞 UI，我会说这很好。