Как мне обрабатывать 10000 данных в массиве, не влияя на производительность в JavaScript

Question

Я пытаюсь получить 10000 данных в массиве с сервера.Но когда он изначально загружался, рендеринг в DOM занимал много времени.Я попробовал следующий подход, как разделить и загрузить каждые сотни данных в новом массиве.

Следующий код, который я пробовал, но не работает.Пожалуйста, дайте мне знать, если кто-нибудь знает в JavaScript.

var count = 0;var data = [{"Name":"test","id":1},..... upto 10000]
var newarray=[];
var i;
for(i=count;i<10000;i++){
  if(i > 100){ count = i; }
   document.getElementById('demo').innerhtml += data[i].Name;
   document.getElementById('test').innerHtml += data[i].id;
} 
   <div id="demo"> </div> <div id="test"> </div>

Я пробовал этот код при загрузке, но проблема с производительностью все еще не решена.

Answer 1

Вы не должны изменять дом внутри цикла.Каждый раз, когда цикл выполняется (для каждой итерации), DOM должен быть перерисован.Вместо этого посмотрите на фрагменты документа

	var count = 0;
	var data = [
		{"Name":"test","id":1},
		{"Name":"another test","id":2},
		{"Name":"yet another test","id":3}
	];
	var newarray=[];
	var i;

	var demoFragment = document.createDocumentFragment();
	var testFragment = document.createDocumentFragment();


	// Use the fragments to hold the content
	// Fragments won't force the DOM to refresh
	for(i=count;i<data.length;i++){
	  if(i > 100){ count = i; }
	   demoFragment.appendChild(document.createTextNode(data[i].Name));
	   testFragment.appendChild(document.createTextNode(data[i].id));
	} 

	// when the loop is finished, add the fragment content to the dom

	document.getElementById('demo').appendChild(demoFragment);
	document.getElementById('test').appendChild(testFragment);

<div id="demo"> </div> 
<div id="test"> </div>

Answer 2

вы можете использовать WebWorkers , он позволяет параллельно запускать JavaScript на веб-странице, не блокируя пользовательский интерфейс