React.js сортировочные большие массивы

Я осуществили реакцию/JS сортировочные базы сетки на этом React library React.js сортировочные большие массивы

вещи работают очень хорошо, но я все медленнее и медленнее реакция, когда у меня есть более 50k объектов в массиве. Более 50 тыс. Занимает около 4 секунд. Более 250 тыс. Занимает 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 раз. 1mil объект в массиве, занимает, возможно, 4 секунды. Интересно, почему?

источник

2016-03-14 Vedran Maricevic.

Эти тайминги просто сортируются или сортируются + визуализируются? – pawel

Сроки только сортируются. Рендер очень быстрый. –

Учитывая, что у вас очень простая структура данных, вы можете попробовать, если писать собственную функцию сортировки быстрее. Связано: http: // stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value-in-javascript – alpha1554

Я достиг ограничения технологии [...]?

В некотором смысле, да. Сортировка обычно является дорогостоящей задачей, которая требует больших затрат вычислительной мощности, если ваш набор данных достаточно велик (особенно если элементы сортируются путем сравнения). Независимо от того, насколько вы оптимизируете, сортировка сотен тысяч элементов - особенно в браузере - будет практически всегда занимать заметное количество времени, фактически замораживая пользовательский интерфейс на секунду или два.

Однако выполнение интенсивных интенсивных задач с синхронным процессором (или IO-) может быть выгружено в Web Workers, что позволяет вам кричать номера без блокировки пользовательского интерфейса.

Принимая this example, это было бы что-то вдоль этих линий:

component.js (х)

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)); 
}

Единственное, что Таким образом, проблема заключается в том, когда пользователь размалывает функции сортировки дополнения. Вы можете отключить прием запросов на сортировку до тех пор, пока рабочий не будет выполнен, и отобразите индикатор загрузки/работы.

Сортировка такого длинного непрерывного списка данных займет некоторое время, но если пользователю будет показан индикатор, позволяющий ему/ей знать, что это длительный процесс без блокировки пользовательского интерфейса, я бы сказал, что это хорошо.

источник

2016-03-14 17:03:25

React.js сортировочные большие массивы

ответ

Смежные вопросы