呈現由數百萬個元素組成的html元素時，如何提高性能？

Question

我在基本上是十六進制查看器的web應用程序中使用jquery。 我將每個字節放入具有唯一ID（文件中的偏移量）的自身元素（只是<i>標記）中，因此我可以輕松地引用它。 我基本上以：

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

當該str具有100K標記時，設置該html行大約需要3秒鍾的時間（我以不同的方式構建str var，所以不要對此發表評論，我只是為了清楚起見在這里以這種方式編寫，這不是問題）。

是否可以在保持引用每個顯示字節的簡便方法的同時提高其性能？ 我想將每個字節保留在標簽中，以便除其他外可以輕松設置其背景色。 我能想到的唯一選擇就是一次加載一部分文件（在該str變量中僅保留10,000個標簽）。

Answer 1

根本不要。

即使有人擁有足夠大的屏幕來實際查看它們，也沒有人需要同時查看10萬個字節。

只需渲染您現在實際需要顯示的標簽，並在需要時渲染更多標簽即可。

Answer 2

您可以通過多次執行以下步驟逐步加載它：

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

Answer 3

您可以消除標簽，並編寫一個函數，該函數使用string，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)
  );

});