Javascript 当呈现由数百万个元素组成的html元素时，如何提高性能？

我在一个基本上是十六进制查看器的webapp中使用jquery。我将每个字节放在它自己的元素（只是一个标记）中，并带有唯一的id（文件中的偏移量），因此我可以轻松地引用它。我基本上以以下方式结束：

var str = 
  "<i id=h0>00 </i>" +
  "<i id=h1>00 </i>" + 
  "<i id=h3>00 </i>" +
  "...";
$("#myid").html(str);

var str=
"00 " +
"00 " + 
"00 " +
"...";
$（“#myid”）.html（str）；

设置html行大约需要3秒钟，当str有100K个标记时（我以不同的方式构建str变量，所以不要对此发表评论，我只是以这种方式在这里编写的，这不是问题）

---

在保持引用显示的每个字节的简单方式的同时，是否有可能提高此功能的性能？我想把每个字节都保存在一个标记中，这样我就可以很容易地设置它的背景色，等等。我能想到的唯一替代方法是一次只加载部分文件（在该str变量中仅保留10000个标记）。

您可以通过多次这样做逐步加载它：

var str = "<i id=h0>00 </i>";
$("#myid").append(str);

var str=“00”；
$（“#myid”）.append（str）；

您可以删除标记，并编写一个函数，用string，slice（a，b）返回所需字符串的文本部分。这将减少加载时间和总字符数。

您可以消除

标记，并仅在实际需要时（控制背景色）在特定文本上以编程方式添加它们。然后，您可以按需添加它们，而不必预先承担那么多开销

浏览器应该能够更高效地使用更少的标记来读取大量文本

---

另一种可能是实现分页或制表符，这样所有的数据就不会一次显示（谁可能想一次查看100000个项目），然后根据需要动态构建子序列的制表符/页面。您将一次生成较小的分页项目。这也会消耗更少的内存，因此对移动设备更加友好。

查看documentFragments。我怀疑jQuery的html方法是否使用它。我猜.html（）只是改变了innerHTML属性。documentFragments可能会给你提速，读这篇文章，

根本就不需要

没有人需要同时查看100k字节，即使有人拥有足够大的屏幕来实际查看它们

只需渲染您现在实际需要显示的标记，并在需要时渲染更多标记。

您应该

$('<i />').attr('id', 'TAB0').html('hello world');

$（''）.attr（'id'，'TAB0'）.html（'hello world'）；

试一试

var$mytab=$（'mytab'）；
$([ 
{id:'myid0'，iHtml:'hello world'}，
{id:'myid1'，iHtml:'hello world'}
]).每个功能（n）{
var数据=此；
$mytab.append(
$（''）.attr（'id'，data.id）.html（data.iHtml）
);
});

您可能应该只呈现此HTML的一部分。没有人会关注100K行，HTML呈现就是这样。如果能更快，我会大吃一惊；也就是说，如果做无数次DOM更新比做一次快，那么这种方法可能会更昂贵，因为有很多DOM访问。不是更快，而是响应更快。第一次显示不会花费三秒。如果对DOM进行快速更改，浏览器将不会立即呈现更改。我不知道这一点。那么使用一批append就足够了，你不觉得吗？尽管其他答案回答了我的问题，但这个回答就是我要采用的解决方案。我在其他领域的表现受到诸多因素的影响。

var $mytab = $('mytab');
$([ 
    { id: 'myid0', iHtml: 'hello world' },
    { id: 'myid1', iHtml: 'hello world' }
]).each(function (n) {
  var data = this;

  $mytab.append(
    $('<i />').attr('id', data.id).html(data.iHtml)
  );

});