Как ускорить работу с массивами?

Question

[vaskadogana]

Сейчас обход массивов происходит через map() и for. Может можно как то это делать быстрей, а то после 15 000 элементов начинаются лаги.

из массива потом рисую график на canvas с помощью d3.
p.s когда isEqual() из lodash возвращает ответ, при первом false?

Comments

[vaskadogana]

Может есть какие нибудь фишки про которые стоит прочесть. Или что то типа разбейте массив на части и запустите его через workers для каждой из частей... (процесс деления массива ведь тоже предполагает его обход?)

[Kovalsky]

Обходите просто циклом. Воркеры конечно решение, но для начала можно попробовать просто разбить обработку на несколько частей: обрабатываете часть, сохраняете номер чанка, кладёте в очередь функцию обработки следующей части.

Answer 1

[Interface]

В первую очередь, я бы посоветовал вам пройтись профайлером (https://developers.google.com/web/tools/chrome-dev... и убедиться, что проблема именно в итерации. Действительно, 15 000 элементов - не тот масштаб для совеременного js и железа, чтобы тормозило сильно. Возможно вы пересчитываете на каждый кадр, например, и тогда имеет смысл делать это реже?

Разница между for и map должна быть незначительна, особенно на таких масштабах.

Обходить в общем случае быстрее, чем for'ом вряд ли возможно, но может быть вы можете использовать другие структуры данных hash-таблицы, Map / Set (es6) etc.

Comments

[vaskadogana]

Interface ну на 15 не лаги, просто пауза на пару секунд перед отрисовкой, а вот на 35 уже лаги

[vaskadogana]

Interface посмотрел профайлер основное время это Garbage Collection.
правда хз что с этим знанием делать)
Спасибо, буду почитать

[Interface]

vaskadogana, было бы намного лучше, если бы вы смогли либо дать свой код, либо его аналог, выкинув все лишнее (и приватное), на котором это можно воспроизвести.

[Kovalsky]

vaskadogana, хм, garbage collection? Создаётся впечатление, что вы слишком много создаёте лишних переменных или что-то вроде того. Вероятно и правда лучше всего было бы посмотреть на ваш код.

[vaskadogana]

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

без данных от сервера работать не будет (а данные он только на разрешенные домены отдает), хз как вырезать чтобы внятное получилось более 1000 строк кода по трем файлам + 10 ок зависимостей

если инспект элементом то можно тут посмотреть
dev-client.skt-globus.com.ua/#/routeDetail/%D0%A2%...
только пройти надо через форму авторизации
dev-client.skt-globus.com.ua
test
test

[vaskadogana]

@lazalu68
вот так разбираю первый раз

getMarshrutPoints = (data)=> {
		let marshrut = new Array();
		let eventsArray = new Array();
		if(data.length !== 0){
			data.map((key)=>{
				if(key.events.length>0){
					key.events.map(ev=>{
						let json = {};
						json.from = ev.from;
						json.ignitionOn = ev.ignitionOn; 
						json.lat = key.gpsData.latitude;
						json.lng = key.gpsData.longitude;
						json.name =ev.name;
						json.timestamp = key.timestamp;
						eventsArray.push(json)
					})
					
				}
				if(key.gpsData!== null){
					if (key.gpsData.latitude==0 && key.gpsData.longitude==0){
						null
					}else{
						return marshrut.push([key.gpsData.latitude, key.gpsData.longitude])
					}
				}
			})
		}
		marshrut = (marshrut.length == 0)?null:marshrut;
		if (checkKey(marshrut)){
			let marker_position = {
				latitude: marshrut[marshrut.length-1][0],
				longitude: marshrut[marshrut.length-1][1]
			}
			this.setState({
				marker_position: marker_position,
			})
		}
		console.log(eventsArray) 
		this.setState({
			marshrut: marshrut,
			events: eventsArray,
		})
	}

потом формирую данные для графиков

selectedGraph = (value)=>{
		let array_charts = [], newVal = new Array;  newVal = value.concat();
		for (let i=0; i <value.length; i++){
			if(value[i] == 'speed'){
				if(Array.isArray(this.state.speed_charts)){
					array_charts.push(this.state.speed_charts)
				}
			}else{
				if(Array.isArray(this.state.chart_data[value[i]])){
					array_charts.push(this.state.chart_data[value[i]])
				}
			}
		}
		this.setState({
			route_detail: 	array_charts,
			selectedGraph: 	newVal,
		});
	}

ну а дальше чуть трешачка
собственно сам график
https://jsfiddle.net/7en7ty9q/
строка 282

[Stepanya]

жестяк!

Зачем вы делаете здесь map?

data.map((key)=>{
        if(key.events.length>0){
          key.events.map(ev=>{

и здесь
key.events.map(ev=>{

Зачем создаете новый массив? newVal = value.concat();

[vaskadogana]

Stepanya,

Зачем вы делаете здесь map?
data.map((key)=>{
if(key.events.length>0){
key.events.map(ev=>{

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

и здесь
key.events.map(ev=>{

Здесь я вытаскиваю информацию о событиях слив, превышение и т.п. Так как они встречаются не в каждом jsone, их может быть к примеру всего 1 за весь маршрут, я тоже делаю отдельный массив. Чтобы перед тем как выводить не проверять весь большой массив.

Зачем создаете новый массив? newVal = value.concat();

Чтобы вызвать рендер компонента, так как, если ставить в стате тот же самый массив при повторном получении данных, компонент не хочет рендерится. Создание нового массива ресурсоемкий процесс?

Answer 2

[Антон]

Батчить, например, по 1000 за тик.
Если сложные вычисления, то можно вывести в вебворкер, чтобы не блокировать ui.

Comments

[vaskadogana]

Антон

Батчить, например, по 1000 за тик.

поясните, пожалуйста)

[Антон]

vaskadogana, что-то типа

while(arr.length > 0) {
  setTimeout(() => arr.slice(0, 1000).map( /* do something */ ), 0);
}

upd. это не будет работать, но, думаю, задумка ясна

Answer 3

[Максим Зинченко]

через each() попробуй

Answer 4

[Егор Живагин]

15 к должно быть не очень много даже для map. Вы на фронте это делаете чтоль?

Самый быстрый обход массива - for от последнего элемента, к первому.

Comments

[Interface]

почему от последнего к первому? есть какое-то объяснение / источник?

[Kovalsky]

Interface, видимо Егор просто перепутал - имел в виду while, а не for:

var i = array.length;

while (--i) {
   // ...
}

[vaskadogana]

Егор Живагин ну да, на фронте)

[Егор Живагин]

Никита Полевой, нет, не перепутал, именно for (var i = Array.length; i >= 0; i--) {

[Interface]

Никита Полевой, в любом случае почему это должно быть быстрее for (обычного самого for (let i = 0; i < arr.length; i++)) - не ясно

[Егор Живагин]

Interface, у меня объяснения нет, хотя можно попробовать погуглить. Но бэнчмарками это подтверждается , можете поискать их на jsPerf

[Kovalsky]

Егор Живагин, полагаю вы всё же что-то перепутали, т.к. больше/меньше это относительно сложная проверка, сложнее чем проверка на неравенство или просто неявный вызов toBoolean, но тестик прилагаю ниже.

Interface, тестик.