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

Question

What is more effective for a "live search function"?

If the button is pressed with a slight delay, the request is executed, the records are returned in json, and I add them as follows:

$.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 add it as follows:

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

NOTE. In php code, I look at each result and add some values ​​to it, than I create a table there, because I already have a for loop. When I add this, it is lightning fast. When I add entries with javascript and go through each json result, it is slower.

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

Answer 1

Here may be a slight improvement in 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 does not need to search every iteration and enter HTML. Instead, do it once.

I think that your approach depends on what gives the result, except how much to be. Because, as more HTML returns to your request, how long does it take for javascript to read / parse it.

For example, if you are with the exception of the return, there should be more than 200 elements in the result set. It should parse, possibly more than 1 MB of body / HTML. And you can, except for this, take a little longer. But if your result sets are rounded to 10-20, it quickly clicks the generated HTML directly to your page.

I hope you understand where I'm going with him.

Recently, the same problem has occurred because my javascript tried to parse 5 MB of HTML. After research, the browser took 5-10 seconds to analyze the response, and PHP took 150-200 ms to complete. I switched to JSON and figured out javascript, and it was done in less than 1 second (note: and I even added funky transitions to make it cool and fast).

Answer 2

It really depends on usecase.

We use Ajax to reduce the HTML overhead from the postback. This means that you are only exchanging data (e.g. with json). With that in mind, you fist aproach is the "best."

Performance is a point that can vary greatly. How good is your server? How good are your customers? How big is the data? What I can say for sure, if you create a table on the client, your server has fewer features (which means it can handle more requests).

Answer 3

javaScript is good because you need to change the value every time you enter the user, so javaScript will give a better user interface than php