Question

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

Answer 1

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.