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

【问题标题】：how do I handle 10000 datas in the array without affecting performance in javascript如何在不影响 javascript 性能的情况下处理数组中的 10000 个数据
【发布时间】：2025-12-06 05:15:01
【问题描述】：

我正在尝试从服务器获取 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>

我在加载时尝试了此代码，但性能问题仍未解决。

【问题讨论】：

在dom中渲染需要很长时间是什么意思？我认为这段代码 sn-p 不足以显示您要做什么
数组包含 10000 个数据，需要很长时间才能渲染。 var array=[{"Name":test,"id":1},.......] 像这样 10000 个数组中的数据很长时间才能在 dom 中呈现。
@user2703151 渲染什么？您可以发布您尝试呈现的 HTML。
我编辑了我的帖子。请立即查看。
您是否尝试过先构建 HTML 并在最后将其添加到 DOM 中？无论如何，您的代码似乎并没有从外观上进行任何拆分。也是innerHTML（外壳）。

标签： javascript arrays performance

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：