Question

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

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

设置html行需要大约3秒，当str有100K标签时（我不同地构建str var，所以不要对此进行评论，为了清楚起见，我只是在这里写了这个，这不是问题）。

是否有可能提高性能，同时保持一种简单的方式来引用显示的每个字节？我想将每个字节保留在标签中，以便我可以轻松设置它的背景颜色等等。我能想到的唯一选择就是一次加载部分文件（在str变量中只保留10,000个标签）。

Answer 1

根本不这样做。

任何人都不需要同时查看100k字节，即使有人的屏幕足够大以实际查看它们。

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

Answer 2

您可以多次执行此操作来逐步加载它：

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

Answer 3

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

Answer 4

您可以删除<i>标记，并仅在实际需要时（以控制背景颜色）在特定文本上以编程方式添加它们。然后，您将根据需要添加它们，而不是预先占用尽可能多的开销。

浏览器应该更有效地使用更少的标签来填充大量文本。

另一种可能性是实现分页或制表符，以便不会立即显示所有数据（谁可能希望一次查看100,000个项目），然后根据需要动态构建后续选项卡/页面。您将一次构建较小的分页项目。这也会消耗更少的内存，因此它更适合移动设备。

Answer 5

查看documentFragments。我怀疑jQuery的html方法使用它。我的猜测是.html（）只是改变了innerHTML属性。 documentFragments可能会提速，请阅读本文http://ejohn.org/blog/dom-documentfragments/

Answer 6

你应该

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

试

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)
  );

});

如何在渲染由数百万个元素组成的html元素时提高性能？

6 个答案: