Как лучше всего перебирать большой массив данных?

Question

[Томас Джефферсон]

Есть большой массив данных, который нужно перебрать с помошью JS, так, что бы максимально снизить нагрузку на браузер.

К примеру: массив состоит из 10 000 элементов, и каждый элемент состоит из массива по 10 элементов, и нужно перебрать этот массив, а перебирал его с помошью foreach, но он очень сильно нагружает браузер, и браузер умирает на 10-30 сек

Comments

[Сергей Сергей]

Порциями по таймеру.
Через web workers.

[zombtron]

Aleksandr-JS-Developer,

Например, если на каждой подитерацией вы стучитесь в дом - то да, тут, кончено, всё плохо...

Не думаю, что все даже в таком случае. У меня ноуту 10 лет, за 3-4 сек перебирает все дом-дерево на 2-3 тыс элементов иерархично (у каждого элемента запрашивает список непосредственных детей) плюс обращается к каждому элементу еще по раза три (tagname, id, classname) и после строится дерево этих элементов, в котором 10+тыс. новых, к которым, хоть и не ко всем, скрипт тоже обращается.
В общем 100 тыс итераций даже с 1-2 несложными манипуляциями с дом для компа 3-5 летней давности - плевое дело.
Но если там какая-то дичь с 3д и десяток опенджиэл операций на каждом шагу, то это жопен.

Смотреть короче нужно, что там за массив и какие колдунства делаются...

[zombtron]

Aleksandr-JS-Developer,
У меня

жестче:

for(i=0; i<childs.length; i++){
			ii++;
			els[ii] = childs[i];
			a += '<tr><td onclick="child('+ii+');"><div>';
			a += els[ii].tagName.toLowerCase();
			if(els[ii].id) a += '<span class="id">#' + els[ii].id + '</span>';
			if(els[ii].className)
				a += '<span class="class">.' + els[ii].className.toString().replace(/ +/g, ' ').trim().split(' ').join('.') + '</span>';
			a += '</div></td><td id="ch'+ii+'" class="child"></td></tr>';
		}

и наверное более жесткого изврата мне не изобрести. .Поэтому, думаю, сравнивать можно. )))

[zombtron]

Aleksandr-JS-Developer,
ради интереса попробовал такое на слабеньком ноуте:

console.log(Date.now());
for(i=0; i<100000; i++){
	var treeN = document.createElement('div');
	treeN.innerHTML = '---'+i+'---';
	document.body.appendChild(treeN);
	if(i==99999)console.log(Date.now());
}

1630833337149
1630833337674

Ок, 0.5 сек выполнение, отрисовка 100к дивов с текстом - 5 сек.

[zombtron]

Aleksandr-JS-Developer,
Ну у меня childs тоже не волшебным образом формируется. )
И дерево со 100+тыс элементов строится тоже не очень линейно (примерно та же картина по времени).
А "залазит в DOM, перебирает его весь, пока не найдёт" это только для извратов типа поиска по контенту. Стандартные селекторы вроде индексируются.
Но ХЗ, что у него там...

[zombtron]

Aleksandr-JS-Developer,
"поход в дом" != перебор элементов "до тех пор пока"

Я не думаю, что в браузерах не реализована какая-то система индексации.
вот попробовал. Есль 1М дивов с классами от ---0--- до ---999999--- и один с айди ---1000000--- в самом конце. Выборки

document.querySelector('.---0---');
document.querySelector('.---999998---');
document.querySelector('.---999999---');
document.querySelector('#---1000000---');

за 2, 95, 207 и 2 мс, соотв. Получается, что оно таки дифференциирует поиск в классах и айди, что есть одним из пунктов в индексации.

Томас Джефферсон,
расскажите уже, что вы там мутите?

[zombtron]

Aleksandr-JS-Developer,

Разница между поиском '.---999998---' и '.---999999---' существенная, порядка в два раза.

Ну, я специально такую взял. А так: 2 (иногда 3), 90-100, 90-100 (иногда до 200+, но это в браузере что-то еще видимо колдуется - вкладок ок. 20 открыто)

Кстати, а какой вы использовали браузер?

FF

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

Можно было бы, но лень. ))

Понятно, что там есть какие-то оптимизации...А это - самые дорогие операции во фронте.

Это да. Что можно отметить, что при оч большом кол-ве элементов в дом и при частом доступе к ним по загадочным правилам - фильтрации, - можно дополнить механизм выборки какими-то своими оптимизациями. Но это изврат, в таком случае нужно смотреть в корень и искать грабли в архитектуре...

[zombtron]

Мне лень с е й ч а с, ибо с паламатой ногой не удобно шаманить, а вообще я обычно все "а что если" исполняю. )

Answer 1

[Alexandroppolus]

100000 итераций должны отлетать максимум за полторы-две секунды. Там что-то тяжелое делается? Если да, то из предложенных Сергеем двух каноничных вариантов, скорее всего, лучше будет с таймером. Хотя если там у тебя бинарные массивы, то можно и воркер замутить (бинари могут идти в другой тред без копирования)