What is more efficient? Generate each tr in javascript or in php?

Question

What is more efficient for a 'live search function'?

On keyup with a little delay is a request made, the records come back in json and I append those on this way:

$.ajax({            
            type: "POST",
            url: "/spares/search/getresults",
            dataType: "json",
            data: "val="+ searchval,
            success: function(response){
                if (response.error == false) {

                        $.each(response.result, function(index, value){
                            $(".choosCred").append("<tr class='productChoose'> <td class='hide'>"+ value.id +"</td> <td class='hide'>"+ prod_id +"</td> <td class='hide'>"+ article +"</td> <td>"+ value.cd_cred +"</td> <td >"+ value.name_org +"</td> <td >"+ value.quality +"</td> <td class='hide'>"+ article_description +"</td> <td>" + '<button type="button" id="add"class="btn-xs btn btn-info add">Add </button>' +"</td> </tr>");         
                        }); 
                }  
            }
        });

But I can generate the full table in php and then append it like this:

 $.ajax({            
            type: "POST",
            url: "/spares/search/getresults/",
            data: "SearchTerm="+ searchValue,
            success: function(response){
                $(".products tbody").html(response).show();
            }
        });

NOTE: In the php code I loop through each result and add some values to it, than i generate there the table because I have already a for loop. When I append this it is lightning fast. When I append the records with javascript and loop through each json result it is slower.

What is the best and fasted way to do it? Or is there another trick to do this?

Answer 1

Here maybe a minor improvement on your javascript example:

$.ajax({            
    type: "POST",
    url: "/spares/search/getresults",
    dataType: "json",
    data: "val="+ searchval,
    success: function(response){
        if (response.error == false) {
            var _content = "";
            $.each(response.result, function(index, value){
                _content += "<tr class='productChoose'> <td class='hide'>"+ value.id +"</td> <td class='hide'>"+ prod_id +"</td> <td class='hide'>"+ article +"</td> <td>"+ value.cd_cred +"</td> <td >"+ value.name_org +"</td> <td >"+ value.quality +"</td> <td class='hide'>"+ article_description +"</td> <td>" + '<button type="button" id="add"class="btn-xs btn btn-info add">Add </button>' +"</td> </tr>";         
            }); 

            $(".choosCred").append(_content);
        }  
    }
});

Now jQuery doesn't need to lookup every single iteration and inject the HTML. Instead do it once.

I think your approach is depending on what the resultset you except to be on how much. Because how more HTML your returning in your request how longer it takes for the javascript to read it/parse it.

For example if you except the return the result set to have 200+ items. It has to parse maybe over 1MB of body/HTML. And you can except it to take a little bit longer. But if your results sets are round 10-20 its quicker to push the generated HTML directly into your page.

Hope you understand where Im going with it.

Had lately same problem, because my javascript tried to parse 5MB of HTML. After investigating it took the browser 5-10 seconds to parse the response, while the PHP was done within 150-200ms. I changed to JSON and parsing with javascript and it was done under 1 sec(note: and I added even funky transitions to make it look cool and fast).

Answer 2

It is realy depending on the usecase.

We use Ajax to reduce the HTML overhead from a postback. This means you only exchange data (with json for example). With this in mind, you fist aproach is the "better" one.

Performance is a point that can very differ. How good is your server? How good are your Clients? How big are the data? What I can say for sure, if you create the table on the client, your server has less to do (which means can handle more requests).