jquery fetch php data is slow. How to make it fast? - php

Question

As the title describe, the speed of jquery display data is 1 to 2 seconds slower than pure php. Demo at http://plekz.com/test-slow3.php . How to make jquery display data as fast as pure php?
Codes :
<div id="jqryd">
</div>
<script src="javascripts/jquery-1.5.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
var jqryd = $('#jqryd');
jQuery.get("sale-show-month2.php", function(data) {
jqryd.html(data);
});
</script>
<?php
$sql = "SELECT payment_date, SUM(price) FROM sale WHERE seller_id=? && Year(payment_date)=? GROUP BY Month(payment_date) DESC"; //this is loged-in user.
$q = $conn->prepare($sql);
$result = $q->execute(array($user_id, $selected_year));
if(!$result){
die("Error Select user table query : ". implode(" : ", $q->errorInfo())); //if don't use implode, output of errorInfo() will be "Array".
}
while($r = $q->fetch(PDO::FETCH_ASSOC)){
$price_db2 = $r['SUM(price)'];
$payment_date_db = $r['payment_date'];
$payment_month_db = date("F", strtotime($payment_date_db));
$payment_month_db2 = date("m", strtotime($payment_date_db));
echo "This is pure php : " . $payment_month_db . " - " . $money_currency . $price_db2 ."<br>";
}
?>

Answer 1

Analyzing the traffic in your site example, I see that, other than result, in your sale-show-month2.php page you return even the jquery javascript. This slow down a lot the whole page: for some reason the network tracer see a querystring in the call like http://plekz.com/javascripts/jquery-1.5.js?_=1337691808625, that doesn't allow the cache to be used.
Simply avoid to return the link to jquery will improve performance.
Even after that you'll see jquery loaded data to come later, but this is due to the fact that the get method is called afeter the first page is loaded. You can see it very clearly with firebug or other tool (chrome and IE has their own).

Answer 2

With regards to the amount of data transfered between server and client I would always just transfer the minimum data required (probably using Plain text / XML or JSON depending on the data) and use the most efficient method to append it to the DOM
No matter how big the data is using the best (in your case fastest) method for appending to the DOM .. check out this jsperf for an indicator which method is fastest
And you will see that using the inbuild DOM creation methods are always faster, for example
var li = document.createElement('li');
li.innerHTML = i;
li.setAttribute('title', 'Element number ' + i);
li.setAttribute('class', 'list-item');
container.appendChild(li);
So in your case I would pass the data as JSON and then loop the nodes and append as required. If there is a lot of data returned then i would paginate the data - or show some initial data then add a "Show more" function that retrieved the next portion of data to be displayed.
With regards to the backend - I would ensure that my query was optimised and was using the correct indexes.

Answer 3

Your question doesn't really make sense. Check the network transfers with firebug or chrome - you'll see you spend about the same time waiting for data in both scenarios. However, after receiving the php'generated data the page takes ages to download jquery - and only then can it request the new data.
The only noteworthy thing is that it takes half a second to connect to your server with jquery - this lag will always be present if the connection is bad. With server-side generated data you'll get it once, with ajax you'll get it twice.
So in your scenario, you cannot speed up the fetch - unless you switch servers to something with proper throughput and proper response times.

Answer 4

While there are some ways to optimise the result, the answer to your question
How to make jquery display data as fast as pure php?
is: It is impossible.
Your Javascript will not be able to load anything into the DOM, until it is parsed and ready. This implies that the "pure PHP" data is already loaded, as it is delivered by the server as part of the main page.
It is only then, when the browser has to do another request to the server, taking another round-trip time, in order to get the AJAX version. So: no matter how good your server and your JS are, the AJAX version will never be as fast as the server-side version.
Note: This applies only for your setup with both version competing. Of course it could make sense to speed up the initial delivery of the HTML page by not using PHP and a database request, then loading some stuff later with AJAX.