如何在数组中处理10000个数据，而不会影响JavaScript中的性能

Question

我正在尝试从服务器中获取10,000个数据。但是，当它加载时，在DOM中呈现需要很长时间。我尝试了以下方法，例如Divide并在新数组中加载数百个数据。

我尝试过的以下代码，但不起作用。如果有人知道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

您可以使用网络工作人员，它允许您在网页上并行运行JavaScript，而无需阻止用户界面

Answer 2

您不应在循环中修改DOM。每次循环执行（对于每次迭代）时，必须重新绘制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>