Performance test - PHP vs Javascript

Performance test – PHP vs Javascript

We are going to do a performance test on getting the data from MySQL database using PHP vs getting data from MySQL database using AJAX in Javascript. We have a database named classicmodels and a table named orderDetails. Following is a code that will get the data from database using PHP:

<table>
    <tr>
	    <th>Order number</th>
	    <th>Product code</th>
	    <th>Quantity ordered</th>
	    <th>Price each</th>
	    <th>Order line number</th>
    </tr>
 
    <?php
        $conn = mysqli_connect("localhost:8889", "root", "root", "classicmodels") or die(mysqli_connect_error());
    
        $sql = "SELECT * FROM orderdetails";
        $result = mysqli_query($conn, $sql);

        $data = array();
        while ($row = mysqli_fetch_object($result))
        {
            ?>

            <tr>
                <td><?php echo $row->orderNumber; ?></td>
                <td><?php echo $row->productCode; ?></td>
                <td><?php echo $row->quantityOrdered; ?></td>
                <td><?php echo $row->priceEach; ?></td>
                <td><?php echo $row->orderLineNumber; ?></td>
            </tr>

            <?php
        }
    ?>
</table>

We have created a table with 5 columns. Then we are making a connection with the MySQL database. Then we are getting all the data from orderDetails table. We are using a while loop to loop through all records and mysqli_fetch_object function will return the next row in each iteration. When we use PHP to get data from the database, we get the following results in performance:

performance test php
performance test php

Now we use the same database, same table, the same number of records, and the same output. In order to get the data using Javascript, we need to create an HTML tag for the table. No need to run any PHP query, not even connection with the database. Give a unique ID to the tag where you want to display all data, in this case, we want to show the data in the table so we have given an ID to tbody tag. Then we are sending an AJAX (no jQuery needed) to test.php file and when the response is received from that file, then we display that data in tbody tag. The response sent from test.php is JSON string so we have to decode that using Javascript JSON.parse function.

index.php

<table>
    <tr>
	    <th>Order number</th>
	    <th>Product code</th>
	    <th>Quantity ordered</th>
	    <th>Price each</th>
	    <th>Order line number</th>
    </tr>
 
    <tbody id="data"></tbody>
</table>
 
<script>
    var ajax = new XMLHttpRequest();
    ajax.open("POST", "test.php", true);
    ajax.send();
 
    ajax.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {

        	console.log(this.responseText);
            var data = JSON.parse(this.responseText);
            console.log(data);
 
            var html = "";
            for(var a = 0; a < data.length; a++) {
                html += "<tr>";
                    html += "<td>" + data[a].orderNumber + "</td>";
                    html += "<td>" + data[a].productCode + "</td>";
                    html += "<td>" + data[a].quantityOrdered + "</td>";
                    html += "<td>" + data[a].priceEach + "</td>";
                    html += "<td>" + data[a].orderLineNumber + "</td>";
                html += "</tr>";
            }
            document.getElementById("data").innerHTML += html;
        }
    };
</script>

Now we need to create a file that will handle that AJAX request. This code will be almost same as we did in simple PHP, but instead of displaying all data, we are adding all data in an array and sending that array as a JSON string to AJAX response using PHP built-in json_encode() function.

test.php

<?php

	$conn = mysqli_connect("localhost:8889", "root", "root", "classicmodels") or die(mysqli_connect_error());
	
	$sql = "SELECT * FROM orderdetails";
	$result = mysqli_query($conn, $sql);

	$data = array();
	while ($row = mysqli_fetch_object($result))
	{
		array_push($data, $row);
	}
	echo json_encode($data);
	exit();
?>

And these are the results we get when we fetch data from database using Javascript and AJAX:

performance test javascript
performance test javascript

Conclusion

PerformancePHPJavascript
Page speed74%93%
Time to load page8.6 seconds5.5 seconds
Page size1.24 MB966 KB
Requests14062

Leave a Reply

Please disable your adblocker or whitelist this site!