Question

我正在尝试从服务器获取阵列中的10,000个数据。但是，在最初加载时，要花很长时间才能在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

您可以使用WebWorkers，它使您可以在网页上并行运行JavaScript，而不会阻塞用户界面

Answer 2

您不应在循环内修改dom。每次循环执行一次（对于每次迭代），都必须重绘DOM。而是看document fragments

	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>

我如何在不影响javascript性能的情况下处理数组中的10000个数据

2 个答案: