jQuery .prependTo（）创建的表导致浏览器“滞后”

Question

I have a problem I am not able to fix, quite difficult to explain but I will do my best.

Basically I have created a web application (in CodeIgniter ) that takes some data of an array coming from a json encoding and adds rows to a table by using the jQuery .prependTo() method in the success function.

Every row of the table contains different elements from the database (coming from the json), depending from the value of the i counter.

The code is as the following (i cut the part about the <tr> and <td> content, it's just styling)

$.ajax({
type: "get",
async: false,
....
....
success: function(data) {


                    var i;
                    var item_cost = new Array();
                    var item_name = new Array();
                    var item_code = new Array();
                    var item_interno = new Array();

                    for(i = 0; i < data.length; i++) {
                       item_cost[i] = data[i].cost;
                       item_name[i] = data[i].name;
                       item_code[i] = data[i].code;
                       item_interno[i] = data[i].codiceinterno;


                       var newTr = // creates the <tr>
                       newTr.html('//creates the <td>')
                       newTr.prependTo("#myTable");
                    }
},

I am sorry if it is a bit unclear, if you need me to update the code because I missed something important let me know and I will do it, but this code alone should explain my problem.

The application works beautifully if in the database there are just a little number of rows (for example, i = 300). They are showed and rendered correctly and I don't get any browser slowing process. But when I work with i = 4000 rows, the browser starts acting slow just like the Javascript code is too heavy to render, and i get "lag" while trying to scroll down the html table, or inputting some values in the input boxes inside the table (to later update it by clicking a button). This is my problem: I am quite sure I'm doing something wrong that is loading up too much memory, as I tested this also on very strong computers. Even totally disabling my CSS won't do the trick.

Thanks for any help you can give me, it would be really appreciated.

Answer 1

The problem

You are using a lot of function call inside a loop. That take a lot of juice and the more item you have, the slower it is.

To solve that, we need to reduce the number of function calls.

My suggestion

Working with native JavaScript would save on performance here. So I suggestion you use string concatenation instead of DOM manipulation methods of jQuery.

Let rework you loop. Since you want your data in a descendant order, we need to reverse the loop :

for(i = data.length; i >= 0; i--)

Then simple string concatenation to build a tr . For that you need a var outside the loop:

var myHTML = ''; //That's the one!
var i;
var item_cost = new Array();
var item_name = new Array();
var item_code = new Array();
var item_interno = new Array();

And build the tr with += . Although, using a single line would make it faster, but less readable :

for(i = data.length; i >= 0; i--) {
    item_cost[i] = data[i].cost;
    item_name[i] = data[i].name;
    item_code[i] = data[i].code;
    item_interno[i] = data[i].codiceinterno;


    myHTML += '<tr>';
    myHTML += '<td>'+yourData+'</td>';//add those data here
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '</tr>';
}

Then, prepend it to your table :

var myHTML = '';
var i;
var item_cost = new Array();
var item_name = new Array();
var item_code = new Array();
var item_interno = new Array();

for(i = data.length; i >= 0; i--) {
    item_cost[i] = data[i].cost;
    item_name[i] = data[i].name;
    item_code[i] = data[i].code;
    item_interno[i] = data[i].codiceinterno;


    myHTML += '<tr>';
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '<td>'+yourData+'</td>';
    myHTML += '</tr>';
}

$('#myTable').prepend(myHTML);

Limitation

From my test, the string length can be 2^28 but cannot be 2^29 . That make a maximum length of approx. 268,435,456 (approx. might not be the best word here since it's between 268,435,456 and 536,870,912 .

If you data character count is higher than that (but let be honnest, that would be a lot of data), you might have to split you string into 2 variables.

Answer 2

I know this is not a real answer to your question, but...

jQuery definitely causes the lag - no wonder. But - whether you choose jQuery to build the table or you just concatenate HTML - let's agree on that: 4000 rows is definitely a lot of data. Too much data? I would say: 200 already is. If we go thousands, the question pops up: why? Is there any application-related reason you really need to retrieve such a big number of records at once? Some of them will probably never be read.

Why not try an ajax-based lazy load approach? Loading 50-record portions every time would seem more robust IMO, and would definitely be a better UX.

Answer 3

My two cents: Why don't retrieve the rows composed from the server instead of making the client work to compound it? You could even cache it. The only thing would be that you'll have more traffic, but in the browser it'll go smoother

UPDATE

To achieve it, you can make your method to distinguish between ajax input or not, and show only $tbody , or the whole table according to it. It would be something like:

$tbody = $this->load->view( 'view_with_oly_tbody', $data, true );
if ( $this->input->is_ajax_request() ) {
    return $tbody;
} else {
    $data['tbody'] = $tbody;
    $this->load->view('your_view_with_table_with_tbody_as_var', $data);
}

Note: Code above will vary according to your views, controller, if you have json in your AJAX or not, write the return in other part, etc. Code above is just for clarify my point with CI.

Ah! and you'll have to manage the answer in the client to append/prepend/substitute the body of the table.