Most efficient way of passing data from php to javascript - hidden form field or json_encode

Question

So my particular problem is as follows - I have a PHP page which loops through a list of coordinates and displays them on my page.

As well as this I want to display them on a map.

I have come up with two methods of doing this, both of which work - I was curious as to which is best, and why?

My understanding is that by placing my javascript within the below, my javascript does not execute until my page is loaded. It is for this reason that both methods work.

$(document).ready(function() 
{

});

The first one is hidden form fields. I can pass my longitude and latitude and get them in my javascript file using jQuery.

The second one is to simply use

<script type='text/javascript'>
    var myarray = <?php echo JSON_encode($array); ?>;

</script>

within my PHP script and then access/loop through it in my Javascript file in a similar way i loop through it in my PHP file.

    for (var i=0, tot=myarray.length; i < tot; i++) 
{//plot points}

Thanks

Looks like it'll depend primarily on the difference in efficiency of your serialization/deserialization functions. Is your hidden form field solution also JSON? If so ... how is it deserialized? ... Also, you're given us two *very simple* options which would be very easy to just benchmark, I would think. (Let us know what your benchmarks reveal!) — svidgen, Mar 22 '13 at 20:17
You could also make an asynchronous call to an endpoint that only serves the JSON values, in case its a long list. This will let the user look at your pretty map loading instead of waiting for the page to load — baloo, Mar 22 '13 at 20:33

score 1 · Answer 1 · answered Mar 22 '13 at 20:25

I would definitely go with the JavaScript array.

Reasons:

(1) Form fields are for posting to the server, and you aren't doing that. So why add hidden input elements to the DOM when you don't need them?

(2) It will be easier to work with the values in the JavaScript array. It is easier to iterate through them, and they don't have to be string values. When you get the value of a hidden input element, it is a string. You then have to parse it to another type if it is really something else. The JavaScript values could even be nested objects.

I wouldn't worry about performance benchmarks. There won't be any significant difference. Ease of coding is more important.

score 0 · Answer 2 · edited May 23 '17 at 11:57

Consider the following: If you use option number 2 (loop through it on the server) and you have 200 requests at the same time, then you will have each request doing this loop in the server. Now, when you JSON Encode your array, and serve it to the client, you are done with it in the server, and let the different browsers (clients) take care of the rest. Now, when you have to serialize the same amount (200) to json, things change. So it is a matter of speed and performance: which one is faster? which ones performs better JSON_encode or for loop and writing everything to the server with echo()? The answer will change depending the size of your objects. So by all means, go ahead and test which one is faster, a simple benchmark of your scripts would sufice.

Most efficient way of passing data from php to javascript - hidden form field or json_encode

2 Answers2