Loading Javascript through PHP

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.

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

That's:

• invalid (ampersands have to be encoded)
• hard to expand (using script[]= would make PHP treat it as an array you can loop over)
• not HTML compatible (always use <script></script>, never <script />)

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).

You're wrong. The browser makes a single request. The server makes a single response. It just digs around in multiple files to construct it.

The question is how is the PHP code supposed to be written

The steps are listed in this answer

and what is/are the advantage(s) of this approach over the 'normal' method?

You get a single request and response, so you avoid the overhead of making multiple HTTP requests.

You lose the benefits of the generally sane cache control headers that servers send for static files, so you have to set up suitable headers in your script.

You can do this like this:

The concept is quite easy, but you may make it a bit more advanced

Step 1: merging the file

<?php

    $scripts = $_GET['script'];
    $contents = "";
    foreach ($scripts as $script)
    {
         // validate the $script here to prevent inclusion of arbitrary files
         $contents .= file_get_contents($pathto . "/" . $script);
    }

    // post processing here
    // eg. jsmin, google closure, etc.
    echo $contents();

?>

usage:

<script src="js.php?script[]=jquery.js&script[]=otherfile.js" type="text/javascript"></script>

Step 2: caching

<?php
    function cacheScripts($scriptsArray,$outputdir)
    {
       $filename = sha1(join("-",$scripts) . ".js";
       $path = $outputdir . "/" . $filename;
       if (file_exists($path))
       {
            return $filename;
       }
       $contents = "";
       foreach ($scripts as $script)
       {
          // validate the $script here to prevent inclusion of arbitrary files
          $contents .= file_get_contents($pathto . "/" . $script);
        }

       // post processing here
       // eg. jsmin, google closure, etc.
       $filename = sha1(join("-",$scripts) . ".js";
       file_write_contents( , $contents);
       return $filename;
    }
?>

 <script src="/js/<?php echo cacheScripts(array('jquery.js', 'myscript.js'),"/path/to/js/dir"); ?>" type="text/javascript"></script>

This makes it a bit more advanced. Please note, this is semi-pseudo code to explain the concepts. In practice you will need to do more error checking and you need to do some cache invalidation.

To do this is a more managed and automated way, there's assetic (if you may use php 5.3):

https://github.com/kriswallsmith/assetic

(Which more or less does this, but much better)

Assetic Documentation https://github.com/kriswallsmith/assetic/blob/master/README.md

The workflow will be something along the lines of this:

use Assetic\Asset\AssetCollection;
use Assetic\Asset\FileAsset;
use Assetic\Asset\GlobAsset;

$js = new AssetCollection(array(
    new GlobAsset('/path/to/js/*'),
    new FileAsset('/path/to/another.js'),
));

// the code is merged when the asset is dumped
echo $js->dump();

There is a lot of support for many formats:

• js
• css
• lot's of minifiers and optimizers (css,js, png, etc.)
• Support for sass, http://sass-lang.com/

Explaining everything is a bit outside the scope of this question. But feel free to open a new question!

PHP will simply concatenate the two script files and sends only 1 script with the contents of both files, so you will only have 1 request to the server.

Using this method, there will still be the same number of disk IO requests as if you had not used the PHP method. However, in the case of a web application, disk IO on the server is never the bottle neck, the network is. What this allows you to do is reduce the overhead associated with requesting the file from the server over the network via HTTP. (Reduce the number of messages sent over the network.) The PHP script outputs the concatenation of all of the requested files so you get all of your scripts in one HTTP request operation rather than multiple.

Looking at the parameters it's passing to js.php it can load two javascript files (or any number for that matter) in one request. It would just look at its parameters (script1, script2, scriptN) and load them all in one go as opposed to loading them one by one with your normal script directive.

The PHP file could also do other things like minimizing before outputting. Although it's probably not a good idea to minimize every request on the fly.

The way the PHP code would be written is, it would look at the script parameters and just load the files from a given directory. However, it's important to note that you should check the file type and or location before loading. You don't want allow a people a backdoor where they can read all the files on your server.