Performance issue using .html(htmlString)

I need to display a huge table (containing hundreds of records).

The table is taken by a server with an XmlHttpRequest call.

The XmlHttpRequest request lasts about 2 seconds (the string is about 2MB).

The rendering of table using the $('#divCont').html(htmlTableString); lasts about 20 seconds depending by the web browser.

$.ajax({开发者_如何学运维
  url: "/getTable",
  success: function(data){
    $('#divCont').html(data);
  }
});

Any suggestion to decrease the time for rendering the htmlTableString?

---

2mb in 2 seconds? That is quite fast. Are you working locally or on a normal deployed server?

In your position I would break the request into many smaller ones. And append them with appendChild and .setTimeout so that the browsers doesnot lock up.

For example instead of locking up for 20 seconds with no progress, you can make the appending progresively so that in the end it might need 80 seconds but there will be no locking up.

---

do you really need to show all the table values in a single stretch. If not you can put paging. So you can take the required count of data at a time.

---

if you can, limit it. 2MB is really big size. I think that it depends on your computer components.

---

This question is on a webpage that takes around 9KB. Your 2MB HTML string is almost 228 times larger.

I think 20 seconds is pretty reasonable to parse it, insert it into the DOM and render it graphically.

Consider, instead, not doing this. Page the results, or something.

---

Table rendering will always be a problem no matter how much you optimize. IE especially is not going to render the table until it finds the table end tag. If you are not using any client side pagination (TableSorter) then I would suggest using Div's instead of using Table. If you need to use tables then I would suggest a hybrid of Server and Client Side pagination (client with Numbers in pages....Server using Next Batch or something like it)

HTH

---

I think the only reasonable solution for this is:

• Grab data by chunks (for example 100 rows / per request) in JSON
• Insert it into table using DocumentFragment where it's possible
• handle scrolling events and load more data as soon user need it (scroll to the end of table).

---

I like the idea to break the request into many smaller ones into the client part.

The problem was just to find a smart way for splitting a large string (just one line) into chunks in order to add records to the table progressively using appendChild and .setTimeout.

The solution is summarized in this code:

$.ajax({
        url: "myUrl",
        cache: true,
        async: true,
        success: function(data){
            setContenentInTable(data);
        }
});

function setContenentInTable(data){
var chunkLength             =   2500;
var chunkNum                =   Math.floor(data.length/chunkLength);
for(var i=0,i less chunkNum+1;i++){
     var contentChunk   =   iovContent.slice(start,stop);
     setTimeout(function(x){
         $('.myTable01').append(x);
     contentChunk, 300*i}
}

---

Send the whole data as json encoded format and parse it using html.

Parsing that much data in javascript will take time. So send the data as splitted json code.

JSON will save lot of memory.

If you are using PHP use json_encode($data);

Also to optimize loading of the data, add the js element to the end of the body tag. Just before /body.

<script src="mydata.js"></script>
</body>

adding it just at the end of body, makes the DOM available to be filled. adding it to the head delays DOM loading till this js has been loaded.