CODEWITHSUNDEEP
javascriptjquery
0xdabbad00
0xdabbad00

Reputation: 998

How to improve performance when rendering html element composed of millions of elements?

I am using jquery in a webapp that is basically a hex viewer. I put each byte in it's own element (just a <i> tag) with a unique id (the offset in the file), so I can easily reference it. I basically end up with:

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

Setting that html line takes about 3 seconds, when that str has 100K tags (I build the str var differently, so don't comment on that, I just wrote it that way here for clarity and it is not the problem).

Is it possible to improve the performance of this while maintaining an easy way to reference each of the bytes displayed? I'd like to keep each byte in a tag so I can easily set it's background color, among other things. The only alternative I can think of is just to load part of the file at a time (keep only 10,000 tags in that str variable).

Upvotes: 0

Views: 900

Answers (6)

metadings
metadings

Reputation: 3848

You should

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

try

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

});

Upvotes: 0

jfriend00
jfriend00

Reputation: 707228

You could eliminate the <i> tags and programatically add them only when actually needed (to control background color) on a particularly piece of text. Then, you'd be adding them on demand and not take as much overhead up front.

The browser should be more efficient at slurping large amounts of text with fewer tags.

Another possibility would be to implement paging or tabs so that all data is not displayed at once (who possibly wants to look at 100,000 items at once) and then dynamically build the subsquent tabs/pages upon demand. You'd be building smaller paged items at a time. This would also consume much less memory so it would be more mobile-friendly.

Upvotes: 0

Guffa
Guffa

Reputation: 700232

Simply don't.

No one will ever need to look at 100k bytes at the same time, even if someone would have a screen large enough to actually view them.

Just render the tags that you actually need to show right now, and render more when needed.

Upvotes: 1

hackattack
hackattack

Reputation: 1087

check out documentFragments. I doubt the html method of jQuery uses it. My guess is that .html() just alters the innerHTML property. documentFragments might give you a speed boost, read this article, http://ejohn.org/blog/dom-documentfragments/

Upvotes: 0

BishopZ
BishopZ

Reputation: 6378

You could eliminate the tags and write a function that returned the text part of the string you want with string,slice(a,b). That would reduce load time and overall character count.

Upvotes: 0

AsTeR
AsTeR

Reputation: 7521

You can load it progressively by doing this multiple times:

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

Upvotes: 0

Related Questions