Loading Javascript through PHP

Question

From a tutorial I read on Sitepoint, I learned that I could load JS files through PHP (it was a comment, anyway). The code for this was in this form:

<script src="js.php?script1=jquery.js&scipt2=main.js" />

The purpose of using PHP was to reduce the number of HTTP requests for JS files. But from the markup above, it seems to me that there are still going to be the same number of requests as if I had written two tags for the JS files (I could be wrong, that's why I'm asking).

The question is how is the PHP code supposed to be written and what is/are the advantage(s) of this approach over the 'normal' method?

Answer 1

The original poster was presumably meaning that

<script src="js.php?script1=jquery.js&scipt2=main.js" />

Will cause less http requests than

<script src="jquery.js" />
<script src="main.js" />

That is because js.php will read all script names from GET parameters and then print it out to a single file. This means that there's only one roundtrip to the server to get all scripts.

js.php would probably be implemented like this:

<?php
$script1 = $_GET['script1'];
$script2 = $_GET['script2'];

echo file_get_contents($script1); // Load the content of jquery.js and print it to browser
echo file_get_contents($script2); // Load the content of main.js and print it to browser

Note that this may not be an optimal solution if there is a low number of scripts that is required. The main issue is that web browser does not load an infinitely number of scripts in parallel from the same domain.

You will need to implement caching to avoid loading and concatenating all your scripts on every request. Loading and combining all scripts on every request will eat very much CPU.

IMO, the best way to do this is to combine and minify all script files into a big one before deploying your website, and then reference that file. This way, the client just makes one roundtrip to the server, and the server does not have any extra load upon each request.

Please note that the PHP solution provided is by no means a good approach, it's just a simple demonstration of the procedure.

Answer 2

The main advantage of this approach is that there is only a single request between the browser and server.

Once the server receives the request, the PHP script combines the javascript files and spits the results out.

Building a PHP script that simply combines JS files is not at all difficult. You simply include the JS files and send the appropriate content-type header.

When it gets more difficult is based on whether or not you want to worry about caching.

I recommend you check out minify.